私は3行のページを持っています。最初の行は150pxの固定高さで、最後の行は120pxの固定高さです。 3行すべてが表示され、スクロールバーが表示されないように、ウィンドウの高さに応じて調整するには中央の行が必要です。中央の行は動的に調整する必要があります。そのため、ブラウザウィンドウを別の画面に移動すると読み込んだ後でも、中央の行はそれに応じて調整する必要があります。第2に、中央の行は、コンテンツを垂直方向に中央と水平に並べる必要があります。どんな助けもありがとうございます。高さdivを動的に変更する
CSS：
.first-row {
height: 150px;
}
.middle-row {
height: calc(100vh - 150px - 120px);
}
.last-row {
height: 120px;
}
私はフレックスボックスを使ってペンを作ろうとしていましたが、@ケビン・ファルギアは私にそれを打ち負かしました。それは、 "display：table-cell;" –
これらのテクニックは常にサポートされているわけではないことを覚えておいてください。 calc：http://caniuse.com/#feat=calc ビューポート単位：http：//caniuse.com/viewport-units/embed/ –
。今、どのように私は垂直に真ん中のコンテンツのplsを整列させるのですか？ –
がフルページモードでのコードスニペットを実行します（！）。 css calc関数を使用して、中央のコンテナの高さを自動的に計算します。
body {
margin: 0;
}
.top {
background-color: #f0f0f0;
height: 150px;
}
.bottom {
background-color: #ddd;
height: 120px;
}
.middle {
background-color: teal;
display: table-cell;
height: calc(100vh - 270px);
text-align: center;
vertical-align: middle;
width: 100vw;
}<div class="top">TOP</div>
<div class="middle">MIDDLE</div>
<div class="bottom">BOTTOM</div>個人的にクリーンなソリューションがflexboxを使用している：
.container {
display: flex;
flex-direction: column;
}
.dynamic {
flex: 1 1 auto;
}
フレックスボックスはより良い解決策です、私はちょうどcodepenを作っていました！ –
示唆したように、フレキシボックスを使用してみてください：
<style>
.container {
display: flex;
flex-flow: column wrap;
align-items: stretch;
height: 100%;
}
.row{}
.row.row1{height: 150px;}
.row.row2{flex: 1 1 auto;}
.row.row3{height: 120px;}
</style>
<div class="container">
<div class="row row1">First row</div>
<div class="row row2">Middle row</div>
<div class="row row3">Final row</div>
</div>
ベンダープレフィックスを追加することを忘れないでください。私はこれらの事についてflexboxes使用
.container {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.header {
height: 50px;
background-color: green;
flex: 0 0;
}
.footer {
height: 30px;
background-color: red;
flex: 0 0;
}
.content {
background-color: blue;
flex: 1 1 auto;
min-height: 50px;
}<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
<div>
をもあなたのコードを投稿してください？ – prasanth
'$（window）.height（）'からウィンドウの高さを取得して、コンテナの高さを計算し、すべてのメインコンテナに対して 'position：fixed;'を使ってレイアウトを設計するのは面倒です。 – Sojtin
cssから高さを取得するには100vhを使用するほうがJSを使用するよりもはるかに優れています。また、あなたのコードはJqueryに依存しています –