Question

我有一些想要布局多个DIV的HTML + CSS代码。布局是这样的：所有DIV都保留在大小固定的父DIV中。然后每个孩子DIV应该保持自己的行，并使用最小高度来绘制其内容。最后一个DIV应该消耗所有剩余高度，以便完全填充父DIV。

此代码显示了使用CSS float和clear属性的方法：

<html>
  <head>
    <style>
      <!--
      .container {
      width: 500px;
      height: 500px;
      border: 3px solid black;
      }

      .top {
      background-color: yellow;
      float: left;
      clear: left;
      width: 100%;
      }

      .bottom {
      background-color: blue;
      height: 100%;
      float: left;
      clear: left;
      width: 100%; 
      }
    -->
    </style>
  </head>
  <body>
    <div class="container">
      <div class="top">top1</div>
      <div class="top">top2</div>
      <div class="top">top3</div>
      <div class="top">top4</div>
      <div class="bottom">bottom</div>
    </div>
  </body>
</html>

但是，最后一个DIV从其父级溢出。我想这是因为width: 100%。

有什么方法可以解决这个问题吗？我想避免设置父级的overflow属性，而且我必须避免使用绝对定位。如果不知怎的话，我可以欺骗最后一个DIV使用父级的高度减去其他DIV的高度之和。

感谢。

Answer 1

添加：

div.container { overflow: hidden; }

它没有溢出，因为它是100％宽度。它溢出，因为它是一个浮动，因此从正常布局中删除。更改overflow属性将改变浏览器满足包含浮动的方式。

哦，如果你还没有，请确保你使用的是DOCTYPE。对于IE来说尤其重要。

在相对定位中用CSS设置DIV的高度

1 个答案: