HTML-如何使滚动条宽度自适应？

Question

我有一个包含大量内容的div，并尝试将其宽度设置为父元素的100%。这个div还使用了内边距，所以我认为应该将宽度设置为auto。 但是由于某种原因，它总是超出父宽度。我甚至将overflow设置为滚动。

我希望这个div能够拥有一个滚动条（仅水平），并且其宽度适合父的宽度。

有人知道如何解决吗？

- omega

---

你尝试过使用 width: 100%; overflow-x: scroll 吗？ - Bojangles

是的，但是这样做后，水平滚动条没有显示（变灰了），而且仍然超出了父元素的宽度。 - omega

Answer 1

父元素100%宽度，带填充：

考虑到所提及的填充应用于100%宽度的元素，问题出在浏览器使用的盒模型中。如果应用100%宽度和一些填充，则该元素将获得width + padding作为其完整宽度，因此导致它变得过大。有几种方法可以解决这个问题：

1. CSS3引入了一个名为box-sizing的新属性，将其设置为border-box，填充将添加到元素给定的宽度内，而不是增加宽度，从而导致元素变得“太大”。（请注意旧浏览器的支持不足）。

2. 我认为可以使用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-xCSS属性。将其设置为scroll，当没有内容可滚动时，您将看到一个禁用的滚动条，因此滚动条始终可见。您的另一个选择是将其设置为auto，在需要时（在不同的浏览器之间可能会有所不同）滚动条将变为可见。

- Christofer Eliasson

Answer 2

尝试：

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

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

- David Passmore

---

它在我的电脑上无法工作。div中的内容有一个表格，其中有1行和许多列，每个单元格都有指定的宽度和高度。 - omega

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

- user2696419

---

请添加详细信息，说明您为什么发布此内容，以及如何帮助用户解决问题！ - Hamad