html - 设置宽度 : 100% 时显示水平滚动条

Question

我在浏览器中设置了 3 个 DIV(左面板、内容、右面板)，如下面的 HTML。

.content 类设置为 100% 宽度，以便在停靠和取消停靠左面板和右面板时扩展。到目前为止一切正常。

一个问题是:.content 有几个元素，它们使浏览器底部显示水平滚动条。

不要在浏览器底部显示水平滚动条，请指导我如何让它显示在 .content DIV 上，以便 .left-panel、.content 和 .right-panel 在浏览器中可见。谢谢!

Fiddle

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;
}

Answer 1

我已经更新了你的 CSS。

更新了左面板，右面板，

内容的宽度不是用 calc() 计算的

并为您的内容留出余量。

然后给内容添加滚动条

.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>

		<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 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 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/