Question

我发布这个是因为我疯了。

我有一个页面，其中内容在页面中居中，无论内容如何，都必须从上到下跨越两列。

所以我有一个带有左子div和右子div的内容div。代码如下：

<html>
<head>
  <style type="text/css">
    html, body {
      margin-top: 0px;
      margin-bottom: 0px;
      height: 100%;
    }

    .main {
      min-height: 100%;
      margin: auto;
      width: 400px;
      background-color: red;
    }

    .left {
      width: 100px;
      padding: 0px;
      height: 100%;
      float: left;
      background-color: blue;
    }

    .right {
      width: 300px;
      height: 100%;
      padding: 0px;
      float: right;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  </body>
</html>

这很好用，div就到底了。我看到两列绿色和蓝色。问题是，如果div（左或右）中的内容大于浏览器窗口，则不起作用。向左侧或右侧div添加大量内容，您应该看到我正在谈论的内容，例如：

<div class="main">
  <div class="left">
    Left<br>
    Left<br>
    Left<br>
    Left<br>
    .... <!-- lots of these -->
  </div>
  <div class="right">
    Right<br>
    Right<br>
    Right<br>
    .... <!-- lots of these -->
  </div>
</div>

我的问题是，为什么会发生这种情况（我已设置html, body { height: 100%; }），我该如何解决？

我疯了。请帮帮我！

谢谢！

Answer 1

你要清理漂浮物吗？

.main:after { content:""; clear:both;display:block; }

编辑：在您的SO代码中，您使用了min-height，而在示例中，您使用常规height作为.main。看，拼写错误和人为错误确实发生了很多，这就是为什么我想要真正的代码。

我为你编辑了它：http://jsfiddle.net/Gd34j/1/

Answer 2

您还可以尝试将颜色加载为页面上的背景图像。使用您的背景创建1200px x 10px图像，然后在主容器集背景中创建：url（“bluegreen.jpg”），然后将background-repeat设置为repeat-y。

Answer 3

感谢meder指出我在正确的轨道上，我终于设法让它在IE，Mozilla和Chrome中一直运行。这是完整的代码，希望它也可以帮助其他人：

<html>
<head>
<style type="text/css">
html,body {
    margin: 0px 0px 0px 0px;
    height: 100%;
    text-align: center;
}

.main:after {
    content: "";
    display: block;
    clear: both;
}

.main {
    background-color: red;
    width: 400px;
    min-height: 100%;
    margin: auto;
   text-align: left;
}

.left {
    width: 100px;
    padding: 0px;
    float: left;
    min-height: 100%;
    background-color: blue;
}

.right {
    width: 300px;
    min-height: 100%;
    padding: 0px;
    float: right;
    background-color: green;
}
</style>
</head>
<body>
<div class="main">
<div class="left">Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
Left<br>
</div>
<div class="right">Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
Right<br>
</div>
</div>
</body>
</html>

Answer 4

如果在非浮动元素中有浮动元素，则它们不会展开父元素。只是浮动到主要元素：

.main {
  min-height: 100%;
  margin: auto;
  width: 400px;
  background-color: red;
  float: left; /* adding floating so the parent elements expands */
}

对于整个身体，DIV背景不会超过100％

4 个答案: