html - 如何使用 CSS 定位这样的 div？

Question

为了在它们之间保持一个空间，我想为我的网站以特定形式放置一些 div，然后向它们添加内容。我一直在响应式地设置页面样式，所以我想知道以这种方式定位那些具有响应性的 div 是否可行。结果我猜可能是这样的:

X 和 Y 是我已经创建的两个 div(用于页眉和菜单)，Z 是页脚。我想放在这些位置的 div 是 DIV 1、DIV 2 和 DIV 3。

目前上面的两个主要部分(标题和菜单)的样式如下:

* {
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

header {
    width:90%;
    height:30%;
    margin: 0 auto;
    background-color:darkblue;
    color:white;
    z-index: 105;
    position:relative;
}

nav {
    width:90%;
    height:22%;
    margin: 0 auto;
    background-color:skyblue;
}

我目前拥有的那些 DIV 1、DIV 2 和 DIV 3 的 HTML 是这样的:

<div id="content">
    <div id="leftinfo">
        <ul>
            <li>INFO</li>
            <li>ABOUT</li>
        </ul>
    </div>


    <div id="hcontent">
        <div class="tophcontent">

        </div>
    </div>


    <div id="hcontent2">
        <p></p>
    </div>
</div>

我一直在努力研究如何像这样定位它，以保持与其他 div 的网络流。任何有关它的帮助或提示将不胜感激。

Answer 1

我猜你想要类似的东西

https://jsfiddle.net/2dxzr1mv/3/

*{
  box-sizing:border-box;
   white-space: nowrap;
}
div{
  padding:0;
  margin:0;
}
.div1{
  width:20%;
  height:100%;
  background-color:red;
  min-height:100vh;
  display:inline-block;
}
.wrapper{
    width:80%;
    min-height:100vh;
    display:inline-block;
}
.div2,.div3{
  width:100%;
  min-height:50vh;
  background-color:yellow;
  word-wrap: break-word;
  overflow:hidden;
  white-space: normal;
}
.div3{
   background-color:blue;
}