記事のディレクトリ
1.トピック
質問に基づいて答えてください。
（下の高さは固定され、上のアダプティブ）
トピック：下の高さは150pxに固定され、上のアダプティブ。
第二に、私のコードの詳細
https://codepen.io/janmie-cjm/pen/LYNBqrz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面布局-两栏布局4</title>
<style>
html *{
margin: 0;
padding: 0;
}
body{
background: #ffccee;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 下高度固定150px，上自适应 -->
<!-- 1-绝对定位 -->
<!-- <section>
<style>
.top1 {
background: #aee;
width: 100%;
height: 100%;
position: absolute;
}
.bottom1 {
background: #eaa;
width: 100%;
height: 150px;
position: absolute;
bottom: 0;
}
</style>
<article class="wrapper1">
<div class="top1">我是上栏</div>
<div class="bottom1">我是下栏</div>
</article>
</section> -->
<!-- 2-flexbox -->
<!-- <section class="wrapper2">
<style>
body,section,article {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
}
.top2 {
background: #aee;
width: 100%;
flex: 1;
}
.bottom2 {
background: #eaa;
width: 100%;
height:150px;
}
</style>
<article>
<div class="top2">我是上栏</div>
<div class="bottom2">我是下栏</div>
</article>
</section> -->
<!-- 3-table -->
<!-- <section>
<style>
.wrapper3 {
display: table;
width: 100%;
height: 100vh;
}
.wrapper3>div {
display: table-row;
}
.top3 {
background: #aee;
width: 100%;
}
.bottom3 {
background: #eaa;
width: 100%;
height: 150px;
}
</style>
<article class="wrapper3">
<div class="top3">我是上栏</div>
<div class="bottom3">我是下栏</div>
</article>
</section> -->
<!-- 4-grid -->
<section>
<style>
.wrapper4 {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto 150px;
width: 100%;
height: 100vh;
}
.top4 {
background: #aee;
width: 100%;
}
.bottom4 {
background: #eaa;
width: 100%;
}
</style>
<article class="wrapper4">
<div class="top4">我是上栏</div>
<div class="bottom4">我是下栏</div>
</article>
</section>
</body>
</html>
3、まとめ
-
この問題の解決策は何ですか？
絶対測位/フレックスボックス/テーブルレイアウト/グリッドレイアウト; -
各プログラムの長所と短所は？
1）絶対ポジショニング
優れた：単純な不足：
ドキュメントフローから脱却し、BFCアプリケーションと組み合わせる必要があり、コードを
増やす2）優れたフレックスボックス
：シンプルで高速、優れた互換性
3）テーブルレイアウト
優れた：優れた互換性不足：
それぞれの高列も同時に変化します;最初にフォームをレンダリングする必要があり、ページ生成速度が遅くなります
。4）グリッドレイアウト。
優れた：複数の行と複数の列を持つ2次元の複雑な操作を実現でき、互換性が向上します簡略化されたコード -
互換性のあるソリューションはありますか？
フレックスボックス、グリッドレイアウト
注意！！！上下のレイアウトはページ全体に広がり、通常、最も外側の高さはheight = 100vhに設定されます。
※コードにはまだまだ欠点がたくさんありますので、いろいろな意見を出し合い、コミュニケーションを図っていきたいと思います。*