私はこのレイアウトを長年取得しようとしています。すべて役に立たない... 私はバックエンドのプログラマーで、私はその部分を楽しんでいますが、CSSと位置付けに関しては、私は全く役に立たないです。Div CSSレイアウトの配置
どうすれば入手できますか？ 3はテキストエリア、1、4、3は100％幅でなければなりません。助けてくれてありがとう、誰かが私に良いCSSのtutか何かを指すことができればそれは非常に高く評価されるだろう。 
各要素に幅と高さを適用すると、我々は正しいサイズと位置を取得することができます。
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>フレキシボックスは、ここに私の友人あなたの友達です。マークアップと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">
\t <section class="node-2-content">
\t \t node 2
\t </section>
<section class="node-4">
\t <section class="node-4-content">
\t \t node 4
\t </section>
<section class="node-3">
<section class="node-3-content">
node 3
</section>
</section>
</section>
</section>
</section>私は、CSSのグリッドになります。 CSS Gridsを使用して実現できるレイアウトについては、このような基本レイアウトを得るのはそれほど重要ではありません。もし興味があるならここで
はいくつかのチュートリアルです：
https://www.youtube.com/watch?v=jV8B24rSN5o&t
https://www.youtube.com/watch?v=HgwCeNVPlo0
.header {
\t grid-area: header;
\t background: dodgerblue;
}
.sidenav {
\t grid-area: sidenav;
\t background: green;
}
.content {
\t grid-area: content;
}
.text-area {
\t grid-area: text-area;
\t background: gray;
}
textarea {
\t height: 100%;
}
.container-fluid {
min-height: 500px;
\t display: grid;
\t grid-template-columns: 1fr 2fr;
\t grid-template-areas:
\t "header header"
\t "sidenav content"
\t "sidenav content"
\t "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">
\t <div class="header">
\t \t <h1>Header Area</h1>
\t </div>
\t <div class="sidenav">
\t \t <h3>Sidenav</h3>
\t \t <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>
\t </div>
\t <div class="content">
\t \t <h3>Content Area</h3>
\t </div>
\t <div class="text-area">
\t \t <textarea placeholder="this is the text area" class="form-control"></textarea>
\t </div>
</div>この例では、ブートストラップを使用しています。側面に空白を入れたくない場合は、ブートストラップを削除し、スタイリングを追加して削除してください。
ありがとう!!!!!!!!!!!!!!! – user2648117