如何使用百分比来容纳divs，并不完美

Question

正如您在此图中看到的，我正在尝试容纳我的网页。我不太擅长CSS，但是我已经尽力了。特别是我无法将div3放置在它对应的位置，它会向下移动。我在做什么错了？

body,
html {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

.div1 {
  border: 1px solid red;
  width: 70%;
  height: 50%;
}

.div2_container {
  height: 50%;
  border: 1px solid blue;
  width: 70%;
}

.div2_son {
  display: inline-block;
  width: 32%;
  border: 1px solid green;
  height: 100%;
}

.div3 {
  display: inline;
  height: 100%;
  width: 30%;
  border: 1px solid brown;
}

<div class="container">
  <div class="div1">

  </div>

  <div class="div2_container">
    <div class="div2_son">

    </div>
    <div class="div2_son">

    </div>
    <div class="div2_son">

    </div>
  </div>

  <div class="div3">

  </div>

</div>

Answer 1

更新您的答案，因为您不能/不想使用vieoport单位。实际上，“问题”是您的边界（使用calc（）方法解决了）。

所以我保留了HTML结构，只是像这样更新了一点CSS：

<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0; /* this is for loosing browser initial margin */
  overflow-y: hidden; /* this is for disable the scroll, since 100% height is automatically add scroll */
}

.container {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid black;
}

.div1 {
  width: calc(70% - 2px);
  height: calc(50% - 2px);
  border: 1px solid red;
}

.div2_container {
  width: calc(70% - 2px);
  height: calc(50% - 2px);
  border: 1px solid blue;
}

.div2_son {
  width: calc(33.33% - 2px); /* change width to fit the width */
  height: calc(100% - 2px);
  /* display: inline-block; since we use float this is unnecessary */
  float: left; /* add that for putting it next to each other */
  border: 1px solid green;
}

.div3 {
  width: calc(30% - 2px);
  height: calc(100% - 2px);
  display: inline;
  border: 1px solid brown;
}
</style>

<div class="container">
    <div class="div1"></div>
    <div class="div2_container">
        <div class="div2_son"></div>
        <div class="div2_son"></div>
        <div class="div2_son"></div>
    </div>
    <div class="div3"></div>
</div>

在这里您将找到有关calc（）函数的信息： https://developer.mozilla.org/en-US/docs/Web/CSS/calc

祝你好运！

Answer 2

尝试一下... 更改div1和div 2容器float:left和div 3 display: inline-block;

body,
html {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  border: 1px solid black;

}

.div1 {
  border: 1px solid red;
  width: 70%;
  height: 50%;
  float:left
}

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

.div2_son {
  display: inline-block;
  width: 32%;
  border: 1px solid green;
  height: 100%;
}

.div3 {
  display: inline-block;
  height: 100%;
  width: 29%;
  border: 1px solid brown;
  
}

<div class="container">
  <div class="div1">

  </div>

  <div class="div2_container">
    <div class="div2_son">

    </div>
    <div class="div2_son">

    </div>
    <div class="div2_son">

    </div>
  </div>

  <div class="div3">

  </div>

</div>

Answer 3

我在左侧和右侧又添加了两个容器

<div class="container" >
  <div class="left">


    <div class="div1">
      Div 1
    </div>
    <div class="div2_container">
    <div class="div2_son">
      div 2
    </div>
    <div class="div2_son">
      div 2
    </div> 
    <div class="div2_son">
      div 2
    </div>       
  </div>

  </div> 
  <div class="right">
    <div class="div3">
    Div 3
    </div>
  </div>

</div>

，然后通过在.left和.right容器上添加一些浮点，在调整它们的某些宽度后，将它们并排放置。然后，我们也可以向.div2_son容器中添加一些浮点数，并调整宽度以使其尽可能精确。

body,html{
  width:100%;
  height:100%;
}
.container{

    width:100%;
    height: 100%;
    border: 1px solid black;
}

.div1{
    border:1px solid red;
    width:100%;
    height: 50%;
}

.div2_container{
  display: inline-block;
    height:49%;
    border: 1px solid blue;
    width: 100%;
}
.div2_son{
    float: left;
    width:32.8%;
    border: 1px solid green;
    height:100%
}

.div3{

    height: 99.8%;
    width:100%;
    border:1px solid brown;
}



  .left {
    float: left;
    position: absolute;
    width:70%;
    height: 100%;

  }
  .right {
    float: right;
    width:29.5%;

    height: 100%;
  }