HTML5の使用CSSは、純粋な「二等分目盛」全体の垂直方向のスペースを達成するために

需要

「画面」のページレイアウトスタイルの下の+固定下+中央のスクロール上記「スクリーン」に固定されたヘッドを実現する必要があります。

：次のような効果と同様に-固定下、十分な長さ内容と常にブログの一番下に、コンテンツとその位置を変更_ -CSDNブログネットワーク_wj1224_ CSSレイアウト

残念ながら、上記のURLは、固定された高さのソリューションが要件を満たしていない与えられています。

請求

1.あなたは純粋なCSSを使用する必要があります。

使用してJSを動的にレイアウトに従って計算した場合、それも可能です。

ヘッドの高さとレイアウトの下部を求めることで、その後、あなたは画面の高さマイナス真ん中に高さを得ることができます。

高さ=中央固定の高さスクリーン - ヘッド高 - 底部の高さ

2.あなたは、テーブルのレイアウトを使用することはできません

UNI-APPのプロジェクトなので、我々は、特定のレイアウトを達成するために、他のHTML要素を使用することを検討していないだろう

3.要素の高さは死んで書き込むことはできません

簡単には、ハードコーディングされた場合には、高さ、貧しい人々の互換性をさまざまな携帯電話の画面の高さに合わせて。

ソリューション

最終的なプログラム：`display: flex`+ `position:fixed;`+`overflow: auto;`

コードは以下の通りです

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;position:fixed; top:0;left: 0;right: 0;bottom: 0;">
  <div>我始终显示在屏幕顶部</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是长长的内容；需要支持滚动；占剩余空间的比例为1份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  <div style="flex: 5;overflow: auto;">
    <ol>
      <li>我是长长的内容；需要支持滚动；占剩余空间的比例为5份</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  <div >我始终显示在屏幕底部</div>
</body>
</html>

垂直二等分線のスキーム：`display: flex`+`flex`

このプログラムのコンテンツの中心が低く、長時間画面内容の下部に表示の下部には、文書の最後には、文書の末尾にスクロール表示に従ってください。

コンテンツ部分のうち少なくとも残りの空間分布は、その得られた、頭部および底部は、通常位置に留まることが期待されます。

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;">
  <div>我现在显示在屏幕顶部</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是短短的内容；</li>
    </ol>
  </div>
  </div>
  <div >我现在显示在屏幕底部</div>
</body>
</html>

しかしながら、その部分の内容マルチ空間分布を得残り、その上には、親コンテナの子要素の高さは、高さが爆発するのではなく、「固定」開始のために、「得られた空き領域の割り当て」

<html>
<head>
</head>
</head>
<body style="display: flex; flex-direction: column;">
  <div>我现在显示在文档的顶部,会随文档滚动</div>
  <div style="flex: 1;overflow: auto;">
    <ol>
      <li>我是长长的内容；自身无法滚动；会随文档滚动</li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
    </ol>
  </div>
  </div>
  <div >我现在显示在文档的底部,会随文档滚动；</div>
</body>
</html>

参考資料

CSSは-CSDNブログブログを飛ぶページの下部には、密接に二つの方法_JavaScript_豚が続くコンテンツのフルスクリーンを考慮した後、画面の下部に固定されている達成します
1. / *それはの効果をマスクするようなので、固定* /
2. 位置：固定;
3. / *ありません、これはロールバックすることはできません* /
4. オーバーフロー：自動;
Flexは、適応型レイアウト幅・問題＃14・shaozj /ブログを使用して実装しました

flex-shrink: 0; 場合は、コンテナの幅を超えた表現フレックス要素は、要素の幅は非常にスクロールバーが表示されていることを、軟化させることができるように、圧縮されていません。
フレックスレイアウト、溶液容器を超えていないコンテンツを維持することはブログ-CSDNブログを_JavaScript_Alex_Zhao

幅、.content無限伸延缶子ノードを設定していない場合。

そのコンテンツが1に残りの幅と曲がるように提供され、それは動的に親コンテナではなく、気晴らしへのサブ要素の内容からであろう。
CSS - 詳述位置決め特性ポジション用途（静的、相対的固定、絶対）

（1）固定絶対位置要素、ブラウザ・ウィンドウの位置に対して要素を生成します。

変更（2）固定配置要素は、文書が影響力の流れによって影響されることはありませんが、常にブラウザウィンドウのビュー内のどこかに位置して、ブラウザウィンドウのスクロールバーでスクロールしません。
ソリューションは、親のdivクラスのコンテンツは気晴らしではなく、親のdivの高さのソリューションをキルトすることはできません記録します。_ネットワークは、ブログ-CSDNブログを_lihang199

フレックスが軟化DIVレイアウトは0の値を設定し、十分なスペースが自動的に押され、すなわち1のフレックス収縮値を初期化することができるされていない場合、DIVを軟化させることができます
ブログ-CSDNブログのフレックスオーバーフロー_dearMengJJ子要素

：春のレイアウト要素は、その容量の伸縮です。
フレックス：1、最小幅：0コンテンツが親ボックス_JavaScript_LiuJingye123が-CSDNブログをブログ超えないことを確認してください

コンテンツが残っている親ボックスを超えるボックスの幅よりも大きいない最小幅場合、最小幅のコンテンツが親ボックス内に閉じ込められたことを確実にするために設けられています。
フロントは：ページのコンテンツは十分ではありません、フッタは常にフロント_JavaScript_キャベツ-CSDNブログの下部に固定されています。
1. 絶対位置
2. 負のマージン
2つの固定された高さ以上のクレームフッタの方法。

HTML5の使用CSSは、純粋な「二等分目盛」全体の垂直方向のスペースを達成するために

HTML5の使用CSSは、純粋な「二等分目盛」全体の垂直方向のスペースを達成するために

需要

請求

1.あなたは純粋なCSSを使用する必要があります。

2.あなたは、テーブルのレイアウトを使用することはできません

3.要素の高さは死んで書き込むことはできません

ソリューション

最終的なプログラム：display: flex+ position:fixed;+overflow: auto;

垂直二等分線のスキーム：display: flex+flex

参考資料

おすすめ

最終的なプログラム：`display: flex`+ `position:fixed;`+`overflow: auto;`

垂直二等分線のスキーム：`display: flex`+`flex`