0

我需要与http://blog.html.it/layoutgala/LayoutGala19.html中的相同，但每列的高度应该是 100%，整个页面的高度应该是最小 100%。有人可以帮忙吗？

4

2 回答 2

1

您可能应该看看这个问题：如何使用 twitter bootstrap 让多个列消耗 100% 的高度？

他们提到了我认为您正在寻找的这个链接（您可以在此处查看源代码）。您必须设置height: 100%and <html>，<body>然后容器应该有一个min-height: 100%

于 2013-03-11T04:02:53.937 回答
0

我试图通过使用 CSS 网格来获得这种布局，但不幸的是我认为这是不可能的。使用浮点数是一种简单的方法。

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

.box {
  height: 100%;
}

.box1 {
  float: left;
  width: 20%;
  background-color: red;

}

.box2 {
  float: left;
  width: 60%;
  background-color: green;

}

.box3 {
  float: left;
  width: 20%;
  background-color: blue;
}
<html>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
  </body>
</html>

然后可以使用绝对/相对定位将文本准确地放置在您想要的每一列中。

编辑：您也可以使用Flexbox很容易地做到这一点。

于 2019-03-19T22:04:05.423 回答