在設置寬度時顯示水平滾動條：100％

我在瀏覽器中設置了3個DIV（左側面板，內容，右側面板）設置，如下面的HTML。在設置寬度時顯示水平滾動條：100％

將.content類設置爲100％寬度以便在停靠和取消鎖定左面板和右面板時進行擴展。到目前爲止，一切運作良好。

一個問題是：.content有幾個元素，他們在瀏覽器底部顯示一個水平滾動條。

而不是在瀏覽器底部顯示水平滾動條，請指導我如何使它顯示在.content DIV上，以便在瀏覽器中可以看到.left-panel，.content和.right-panel。謝謝！

HTML

<div class="table"> 
    <div> 
     <div class="left-panel"><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p> 
     </div> 
    </div> 
    <div class="content"> 
     <div style="width:100%; background:#ccc; display: inline-flex"> 
      <div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div> 
     </div> 
     <div style="border:1px solid red;position:absolute;bottom:0">ddddd 
     </div> 
    </div> 
    <div > 
     <div class="right-panel"><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p></div> 
    </div> 
</div>

CSS

.table > div{ 
display: table-cell; 
} 
.content{ 
position:relative; 
width:100%; border:1px solid red; 
overflow: auto; 
} 
.left-panel, .right-panel{ 
width:200px; 
border:1px solid black; 
height:100%; 
overflow:auto; 
} 

.box { 
width: 300px; 
border: solid 1px red; 
height: 100px; 
}

來源

2016-11-10 abcid d

你在找這樣的事情？ http://jsfiddle.net/byx2d460/33/ –

我已經更新了你的CSS。

更新左圖，右圖，

寬度內容不與鈣（）

，給利潤率留給你的內容進行計算。

然後添加滾動條內容

.content{ 
 
position: relative; 
 
    width: calc(100% - 388px); 
 
    border: 1px solid red; 
 
    overflow: auto; 
 
    display: inline-block; 
 
    margin-left: 193px; 
 
    margin-top: -8px; 
 
    height: 100vh; 
 
    overflow-x: auto; 
 
} 
 
.left-panel{ 
 
    left:0; 
 
} 
 
.right-panel{ 
 
    right:0; 
 
} 
 
.left-panel, .right-panel{ 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    height: 100%; 
 
    overflow: auto; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.box { 
 
min-width: 300px; 
 
border: solid 1px red; 
 
height: 100px; 
 
}

<div> 
 

 
\t \t <div class="left-panel"><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p><p>Left Panel</p> 
 
\t \t </div> 
 

 
    <div class="content"> 
 
\t \t <div style="width:100%; background:#ccc; display: inline-flex"> 
 
\t \t \t <div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div><div class="box">&nbsp;</div> 
 
\t \t </div> 
 
\t \t <div style="border:1px solid red;position:absolute;bottom:0">ddddd 
 
\t \t </div> 
 
\t </div> 
 

 
\t \t <div class="right-panel"><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p><p>Right Panel</p></div> 
 

 
</div>

http://jsfiddle.net/byx2d460/27/

來源

2016-11-10 21:54:08 Sagar

神聖的滾動條，蝙蝠俠。 –

@Sagar，非常感謝！滾動條顯示如預期。由於'width：calc（100％ - 388px）;'滾動條顯示，但是當我試圖隱藏左側或右側面板中的一個時，'.content'不會自行擴展。任何想法？ –

將一些類添加到父div（一個包含left，content和right）並相應地更新css。 @abcidd – Sagar

如果你想要的內容DIV中，你必須使用content DIV中的鈣功能水平滾動條，像薩加爾解釋了波紋管。

如果您想讓它響應並且不在意box div中的最小寬度，請使用我的解決方案。

http://jsfiddle.net/byx2d460/30/

.content{ 
position:relative; 
width:100%; 
border:1px solid red; 
overflow: auto; 
} 
.left-panel, .right-panel{ 
width:200px; 
border:1px solid black; 
height:100%; 
overflow:auto; 
} 

.box { 
width: 11%; 
border: solid 1px red; 
height: 100px; 
}

來源

2016-11-10 22:00:24

在設置寬度時顯示水平滾動條：100％

回答

相關問題