响应式设计中的嵌套 DIV - 边距、填充等答案

【问题标题】：Nested DIV in a responsive design - margin, padding, etc响应式设计中的嵌套 DIV - 边距、填充等
【发布时间】：2012-09-06 22:56:18
【问题描述】：

自从我真正处理网页设计中的百分比以来已经有一段时间了。我有一个嵌套的 DIV，它位于容器内，但容器的填充将其推到 100% 宽度之外。不想通过反复试验来了解是什么使它尽可能接近 100% 的宽度，我该如何实现舒适贴合？我还注意到，当我调整窗口大小并缩小空间时，右侧的填充变得更小了。

<div id="block">
    <div class="inside">ssdfsdfdfsfdf</div>
</div>

#block {
    width: 100%;
    background-color: #CCC;
    padding: 20px;
}
.inside {
    height: 200px;
    background-color: #333;
}

http://jsfiddle.net/AndyMP/cs2U9/4/

【问题讨论】：

您可以将填充也设置为百分比值，然后填充 + 宽度 = 100%
为什么JSFiddle代码和你发布的代码不匹配？这使用填充，而您的示例使用边距..？有边距的版本对我来说看起来很紧。您可能想给 .inner 一个溢出值，但除此之外，没有发现问题。
抱歉，我发错了小提琴。已修复...jsfiddle.net/AndyMP/cs2U9/4
为什么不给 .inside div 留出 20px 的边距并完全跳过填充？
好的，我修好了...我需要溢出：隐藏在容器 DIV 上。我的愚蠢... :) 谢谢

标签： html css responsive-design

【解决方案1】：

为#block 元素使用box-sizing css 属性。

#block {
    width: 100%;
    background-color: #CCC;
    padding: 20px;

    -o-box-sizing: border-box; /* Opera */
    -ms-box-sizing: border-box; /* IE */
    -moz-box-sizing: border-box; /* Mozilla */
    -webkit-box-sizing: border-box; /* Chrome, Safari */
    box-sizing: border-box;
}

关于 CSS box-sizing 属性：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

【讨论】：

令人惊讶的是，如果不使用尚未经过 CSS3 验证的 CSS，这将无法实现。

【解决方案2】：

我需要一个

overflow: hidden

放在容器 DIV 上，以使其完美放置。

http://jsfiddle.net/AndyMP/cs2U9/6/

【讨论】：