Div css 布局定位

Question

多年来我一直在尝试获得这种布局。都无济于事... 我是一名后端程序员，我喜欢那部分，但是在 css 和定位方面，我完全没用。

我怎么得到这个？数字 3 是文本区域，1、4 和 3 必须为 100% 宽度。感谢您的帮助，如果有人能指点我一个好的 css tut 之类的东西，我将不胜感激。

Answer 1

对每个元素应用宽度和高度，我们可以获得正确的大小和位置。

html,body {
  width: 100%;
  height: 100%;
  margin: 0;

}
#one {
  width: 100%;
  height: 10%;
  background-color: blue;
}
#two {
  float: left;
  width: 10%;
  height: 90%;
  background-color: green;
}
#three {
  width: 100%;
  height: 80%;
  background-color: lightgrey;
}
#four {
  width: 100%;
  height: 10%;
  background-color: grey;
}

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>

Answer 2

Flexbox 是你的朋友，我的朋友。标记和 CSS 将使用一系列由 flex-grow 和 flex-direction 组成的规则。要让您了解所有机制可能需要大量输入，但 Chris Coyier 提供了一套非常好的文档 here.

    .node-1 { background: red; display: flex; flex-direction: column; height: 90vh; }
    .node-2 { background: blue; display: flex; flex-grow: 1; }
    .node-4 { background: green; display: flex; flex-direction: column; flex-grow: 1; }
    .node-4-content { flex-grow: 1; }
    .node-3 { background: yellow; }

<section class="node-1">
  <section class="node-1-content">
    node 1
  </section>
  <section class="node-2">
 <section class="node-2-content">
  node 2
 </section>
    <section class="node-4">
   <section class="node-4-content">
    node 4
   </section>
      <section class="node-3">
        <section class="node-3-content">
          node 3
        </section>
      </section>
    </section>
  </section>
</section>

Answer 3

我会研究 CSS 网格。几乎任何您想要的布局都可以使用 CSS Grids 实现，获得像这样的基本布局并不是那么多。

如果您有兴趣，这里有一些教程：

https://www.youtube.com/watch?v=jV8B24rSN5o&t

https://www.youtube.com/watch?v=HgwCeNVPlo0

.header {
 grid-area: header;
 background: dodgerblue;
}

.sidenav {
 grid-area: sidenav;
 background: green;
}

.content {
 grid-area: content;
}

.text-area {
 grid-area: text-area;
 background: gray;
}

textarea {
 height: 100%;
}

.container-fluid {
  min-height: 500px;
 display: grid;
 grid-template-columns: 1fr 2fr;
 grid-template-areas:
 "header header"
 "sidenav content"
 "sidenav content"
 "sidenav text-area"
}

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="container-fluid">
 <div class="header">
  <h1>Header Area</h1>
 </div>
 <div class="sidenav">
  <h3>Sidenav</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi error quos sapiente at. Provident temporibus, voluptatum quos repellendus ullam id quidem tenetur sit. Assumenda error, ut cupiditate totam voluptas dolor odit pariatur accusantium iusto voluptatum libero quis non, qui minima.</p>
 </div>
 <div class="content">
  <h3>Content Area</h3>
 </div>
 <div class="text-area">
  <textarea placeholder="this is the text area" class="form-control"></textarea>
 </div>
</div>

本例使用bootstrap。如果您不想要两侧的空白，请删除 bootstrap 并添加一些样式以将其删除。

Div css 布局定位

Div css layout positioning

html

css

positioning

responsive