设置宽度时显示水平滚动条：100%答案

【问题标题】：Showing horizontal-scrollbar while setting width: 100%设置宽度时显示水平滚动条：100%
【发布时间】：2016-11-10 21:33:50
【问题描述】：

我在浏览器中有 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;
}

【问题讨论】：

您在寻找这样的东西吗？ jsfiddle.net/byx2d460/33

标签： html css

【解决方案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/

【讨论】：

@Sagar，非常感谢！滚动条按预期显示。由于width: calc(100% - 388px); 显示滚动条，但是当我尝试隐藏左侧或右侧面板之一时，.content 不会自行扩展。有什么想法吗？
向父 div 添加一些类（包含左、内容和右的类）并相应地更新 css。 @abcidd

【解决方案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;
}

【讨论】：