Question

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

Answer 1

你应该看一下这个问题：How to have multiple columns that consume 100% height using twitter bootstrap?

他们提到了link（你可以看到源代码here），我认为这就是你要找的东西。您必须为height: 100%和<html>设置<body>，然后容器应该有min-height: 100%

Answer 2

我试图通过使用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轻松完成此操作。

3列+ 100％高度

2 个答案: