Question

我正在开发一些使用div和table来渲染数据块的代码。表元素按预期呈现，但div超出页面宽度。下面的示例代码是我项目中产生问题的最小代码选择。如您所见，两个元素都使用相同的类“contentblock”来指定100％的宽度。 Chromium Version 25.0.1364.160 Ubuntu 12.04（25.0.1364.160-0ubuntu0.12.04.1）。

<html><body>
<style>
    .contentblock {
        width: 100%;
        border: 1px solid #000;
        padding: .5em;
    }
    p {
        margin-bottom: 1em;
    }
</style>

<div class="contentblock">
    <p><span class="label">LOREM IPSUM SIC DOLOR</span></p>

    <p>Praesent aliquam varius dolor. Vestibulum at sem sed augue interdum condimentum eget ornare urna. Nullam blandit auctor bibendum. Cras hendrerit iaculis venenatis. Curabitur interdum, lorem quis feugiat interdum, urna sapien ultricies nisl, in pretium diam arcu ac eros. Fusce elit tellus, euismod at aliquet non, pulvinar at sapien. Aliquam molestie ante in augue convallis a malesuada nulla posuere. Aliquam blandit massa a eros viverra semper. </p>
</div>
<table class="contentblock">
    <tr>
        <th class="label"><span class="label">Lorem</span></th>
        <th class="checkbox"><span class="label">Ipsum</span></th>
        <th class="checkbox"><span class="label">Dolor</span></th>
        <th class="checkbox"><span class="label">Aliquam</span></th>
        <th class="initialbox"><span class="label">Dictum</span></th>
    </tr>
</table>
</body></html>

Answer 1

边框会导致div变宽，请使用box-model：http://css-tricks.com/the-css-box-model/

.contentblock {
      width: 100%;
      border: 1px solid #000;
      padding: .5em;
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
      box-sizing: border-box;
}

但实际上你应该有一些CSS重置样式表，例如normalize：http://necolas.github.io/normalize.css/

和/或应用全局框模型：

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

Answer 2

首先将body和html的边距重置为0：

body, html {
    margin:0;
}

然后使用box-sizing，以便您拥有的边框不会增加元素的宽度：

.contentblock {
    width: 100%;
    border: 1px solid #000;
    padding: .5em;
    // Add the next 3 lines
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 3

在默认的CSS框模型box-sizing: content-box中，元素的padding和border已添加到指定的width，因此您的.contentblock div实际上是窗口的100％加上1em填充和2px边框（左右） - 所以它比视口宽1em + 2px。

您可以通过切换到border-box框模型（将box-sizing: border-box CSS属性添加到元素）轻松解决此问题。在border-box模型中，填充和边框从显式宽度中提取而不是添加到其中。

如果您希望所有内容都使用减法border-box CSS框模型而非默认的附加content-box，请将其添加到您的CSS中：

* { box-sizing: border-box }

老实说，它是一种更直观的布局方法，可以帮助避免大量的尺寸和定位问题。我在过去两三年里建立的每个网站都使用过它。

<强> Paul Irish has a great blog post discussing this a bit more.

Answer 4

这是一个帮助您了解可以更改的内容的jsfiddle：jsfiddle

首先，我更改了为您的身体添加margin: 0;：

body { margin:0; }

然后我添加了box-sizing来帮助解决width: 100%和padding:.5em问题

.contentblock {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

宽度100％样式的<div>实际上比页面</div>宽

4 个答案: