页面偏差分为4个部分 H 布局css

Question

我正试图做一个H页面布局，但由于某些原因，我的最后一个div到了底部，我很好奇，如果我可以做我想要的，但在flexbox上，所以我也尝试了这个。

body {
  background-color: grey;
  background-size: 100%;
  background-repeat: no-repeat;
}

html,
body {
  height: 100%;
  margin: 0px;
}

.a {
  float: left;
  width: 25%;
  height: 100%;
  border: 1px solid blue;
}

.b {
  float: left;
  width: 50%;
  height: 60%;
  border: 1px solid blue;
}

.c {
  float: left;
  width: 50%;
  height: 40%;
  border: 1px solid blue;
}

.d {
  float: right;
  width: 25%;
  height: 100%;
  border: 1px solid blue;
}

<div class="a">
  text
</div>
<div class="b">
  text
</div>
<div class="c">
  text
</div>
<div class="d">
  text
</div>

但由于某种原因，我的最后一个div到了底部 我很好奇，如果我可以做我想要的，但在flexbox上，所以我也尝试了这个。

如何将页面分割成4等份？

http:/jsfiddle.netscrivye6bd4ow4

html,
body {
 height: 100%;
 padding: 0;
 margin: 0;
}

div {
 float: left;
}

#div1 {
 background: #DDD;
 width: 20%;
 height: 100%;
}

#div2 {
 background: #AAA;
 width: 60%;
 height: 60%;
}

#div3 {
 background: #777;
 width: 60%;
 height: 40%;
}

#div4 {
 float: right;
 background: #444;
 width: 20%;
 height: 100%;
}

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

同样的结果，但我认为比第一个例子更接近。

我知道这是一个非常有争议的问题，但任何帮助，甚至是一个意见，哪种方法u认为是最好的感谢。先谢谢你了

Answer 1

有两个问题需要解决（如果你想让浮动版工作的话）。

1.) 你需要使用 box-sizing: border-box; 将边框包含在宽度测量中，否则(见你的代码段)第四个元素将滑落到第三个元素下面，因为没有足够的空间给它(只有几个像素，但还是)。

2.) 你需要改变HTML中的顺序：d应该是第三个元素，这样它就可以在pagecontainer的顶部。

* {
  box-sizing: border-box;
}

body {
  background-color: grey;
  background-size: 100%;
  background-repeat: no-repeat;
}

html,
body {
  height: 100%;
  margin: 0px;
}

.a {
  float: left;
  width: 25%;
  height: 100%;
  border: 1px solid blue;
}

.b {
  float: left;
  width: 50%;
  height: 60%;
  border: 1px solid blue;
}

.c {
  float: left;
  width: 50%;
  height: 40%;
  border: 1px solid blue;
}

.d {
  float: right;
  width: 25%;
  height: 100%;
  border: 1px solid blue;
}

<div class="a">
  text a 
</div>
<div class="b">
  text b
</div>
<div class="d">
  text d
</div>
<div class="c">
  text c 
</div>