在设置宽度时显示水平滚动条：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％

回答

相关问题