Question

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

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

Answer 1

我已更新你的CSS。

更新左侧面板，右侧面板，

内容的宽度不是使用calc（）

计算的

并为您的内容留下余量。

然后将滚动条添加到内容

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

如果你想在内容div中使用水平滚动条，你必须在content div中使用calc函数，就像sagar在下面解释的那样。

如果你想让它响应而不关心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;
}

设置宽度时显示水平滚动条：100％

2 个答案: