Question

我有一个DIV部分，希望在各种环境中将其用作“组件”。对于“组件”，我的意思是它将自动包含在HTML页面的某些无法预见的位置。

DIV部分所需的行为是它的宽度应始终为100％，这意味着它应该完全填充父级。出现问题是因为DIV的总宽度是内部宽度+填充+边距的总和。我对DIV部分的填充是：

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

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

这样的东西

首先，我不会使用javascript或JQuery来解决这种布局问题。

提前致谢，
兹拉特科

Answer 1

如何筑巢分区？

<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>

希望这有帮助。

Answer 2

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

Answer 3

这就是box-sizing属性的含义。请参阅this guide。

Answer 4

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

.parent {overflow: hidden;}

现在应隐藏在父母身上流过的任何内容。

DIV问题的总宽度

4 个答案: