如何用CSS定位div这样的？

Question

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

我和X已经创建了两个div（用于标题和菜单）和Z页脚。我想把这些职位放在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;
}

Answer 2

我尝试过像你的照片。

CSS

* {
    margin:0;
    padding:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#content {
  table-layout: fixed;
  display: table;
  width: 100%;
  height: 100%;
}
#content > div {
  display: table-cell;
}
.tophcontent {
  height: 40px;
  margin: 0 10px;
  border: 2px solid orange;
}
.midhcontent {
  margin: 10px;
  margin-bottom: 0;
  height: calc(100% - 46px);
  border: 2px solid green;
}
#leftinfo {
  border: 3px solid gray;
  width:120px;
}

HTML

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


    <div id="header">
        <div class="tophcontent">
        </div>
        <div class="midhcontent">
        </div>
    </div>
</div>

这是我的JSfiddle

Answer 3

你的意思是这样吗？

Codepen example

body, html{
    height:100%;
}

#wrapper{
    position:relative;
    width: 90%;
    height:100%;
    margin:0 auto;
}

.left{
    float:left;
    width:30%;
    height:100%;
    background:green;
}

.top-right{
    position:absolute;
    right:0;
    left:31%;
    height:30%;
    float:left;
    background:blue;
}

.bottom-right{
    position:absolute;
    right:0;
    left:31%;
    bottom:0;
    top:32%;
    float:left;
    background:red;
}

Answer 4

以下是使用display: flex的示例。它今天有大约94％的浏览器支持，我认为可以认为非常好。

这样做的一大好处是，与float和inline-block版本相比，每个元素的内容都是完全动态的。

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
}
* {
  box-sizing: border-box;
}
.container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.info, .about, .content-left, .content-right-top,
.content-right-bottom, .footer {
  border: 1px solid;
}
.wrapper {
  flex: 1;
  display: flex;
  min-height: 100%;
}
.content-left, .wrapper-inner {
  flex: 1;
}
.wrapper-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.content-right-top, .content-right-bottom {
  flex: 1;
}

<div class="container">
  <div class="info">
    Info<br>
    2 lines
  </div>

  <div class="about">
    About<br>
    in<br>
    3 lines
  </div>

  <div class="wrapper">
    <div class="content-left">
      Left take all the rest of the space
      Left take all the rest of the space
      Left take all the rest of the space
      Left take all the rest of the space
      Left take all the rest of the space
      Left take all the rest of the space
      Left take all the rest of the space
      Left take all the rest of the space
      Left take all the rest of the space
    </div>
    <div class="wrapper-inner">
      <div class="content-right-top">
        Right - Top
        Right - Top
        Right - Top
        Right - Top
        Right - Top
        Right - Top
        Right - Top
        Right - Top
      </div>
      <div class="content-right-bottom">
        Right - Bottom
        Right - Bottom
        Right - Bottom
        Right - Bottom
        Right - Bottom
        Right - Bottom
        Right - Bottom
      </div>
    </div>
  </div>

  <div class="footer">
    Footer<br>
    has 2 lines
  </div>
</div>