Question

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

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

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

Answer 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，如果需要，滚动条将变为可见（可能因浏览器而异）。

Answer 2

尝试：

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

请参阅我的演示：http://jsfiddle.net/HRRsU/3/

Answer 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

HTML - 如何使用自动宽度滚动？

3 个答案: