html - 如何使用自动宽度滚动？答案

【问题标题】：html - how to make a scroll with the width on auto?html - 如何使用自动宽度滚动？
【发布时间】：2014-11-05 17:49:59
【问题描述】：

我有一个包含大量内容的 div，并尝试将宽度设置为父元素的 100%。这个 div 也使用填充，所以我认为我应该将宽度设置为自动。但由于某种原因，它总是扩展超过父宽度。我什至将溢出设置为滚动。

我想要的是 div 有一个滚动条（仅水平），并且它的宽度适合父宽度。

有谁知道我该如何解决这个问题？

【问题讨论】：

你试过width: 100%; overflow-x: scroll吗？
是的，但是这样，水平滚动条没有显示（它是灰色的）并且它仍然扩展超过父宽度。

标签： css html width scrollbar

【解决方案1】：

其父级的 100% 宽度，带内边距：

鉴于您提到的填充应用于 100% 宽的元素，问题出在浏览器使用的 box model 内。如果应用 100% 的宽度和一些填充，元素将获得 width + padding 作为其完整宽度，从而导致它变得太大。有几种方法可以解决这个问题：

CSS3 引入了一个名为box-sizing 的新属性，通过将其设置为border-box，填充将添加到元素的给定宽度内，而不是添加到宽度导致元素变为“到”大的”。（请注意旧版浏览器缺乏支持）。
我相信可以使用left: 0; right: 0; 而不是width: 100%;。在这种情况下，您可以添加填充，而元素不会变宽。

实践中的第二种选择：

<!-- The markup -->
<div class="parent">
    <div class="child">Child</div>
</div>

/* The CSS */
.parent {
    width: 200px;
    height: 200px;
    position: relative;
    background-color: #666;
}

.child {
    position: absolute;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: #888;
}

这是第二个选项的工作示例：http://jsfiddle.net/mGLRD/

水平滚动条：

要获得水平滚动条，您必须查看overflow-x CSS 属性。通过将其设置为scroll，当没有可滚动的内容时，您将看到禁用的滚动条，因此滚动条始终可见。您的另一个选项是将其设置为 auto，如果需要，滚动条将在此处可见（可能因不同浏览器而异）。

【讨论】：

【解决方案2】：

试试：

div#content {
    width:auto;
    padding:20px;
    overflow-x:auto;
}

查看我的演示：http://jsfiddle.net/HRRsU/3/

【讨论】：

它不适用于我的。 div中的内容有一个1行多列的表格，每个单元格都有指定的宽度和高度。

【解决方案3】：

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

【讨论】：

请添加详细信息，为什么发布这个，它如何帮助用户解决他的问题！