DIV 问题的总宽度答案

【问题标题】：Total width of DIV problemDIV 问题的总宽度
【发布时间】：2010-01-27 20:20:18
【问题描述】：

我有一个 DIV 部分，想在各种情况下将其用作“组件”。对于“组件”，我的意思是它会自动包含在HTML页面的某些无法预见的地方。

DIV 部分的必要行为是它的宽度应该始终为 100%，这意味着它应该完全填满父级。由于 DIV 的总宽度是内部宽度 + 填充 + 边距的总和，因此出现了一个问题。我对 DIV 部分的填充是：

padding-left: 10px; padding-right: 10px;

问题是：当我不知道父级的宽度，但想要 100% 时，我应该如何设置 DIV 部分的宽度？没有像 100% - 2 * 10px 这样的东西...

最好不要使用 javascript 或 JQuery 来解决这种布局问题。

提前致谢，
兹拉特科

【问题讨论】：

标签： css xhtml html width

【解决方案1】：

嵌套 Div 怎么样？

<html>
 <head>
  <title>Div Test</title>
 </head>
 <body>
  <div class='outerDiv' style=' background-color: red;margin: 0px; padding: 0px 10px;'>
   <div class='innerDiv' style='width: 100%; background-color: yellow; margin: 0px; padding: 0px;'>
    Whatever
   </div>
  </div>
 </body>
</html>

希望这会有所帮助。

【讨论】：

【解决方案2】：

将宽度保留为auto。除非你正在做一些像浮动它来摆弄它的显示（你不应该这样做，考虑到你想要实现的目标），否则会导致宽度使用剩余空间。

【讨论】：

【解决方案3】：

这就是box-sizing 属性的用途。见this guide。

【讨论】：

这永远不会成为现实世界中任何问题的解决方案。我建议忘记它甚至存在。

【解决方案4】：

您可以从组件中删除填充，这将直接解决您的问题。但是，我假设您出于某种原因不会/不能这样做。因此，如果组件 div 总是在父 div 内，那么如何将父 div 的溢出设置为隐藏。只需将其添加到父元素 CSS：

.parent {overflow: hidden;}

现在应该隐藏任何流过父级的内容。

【讨论】：