1

ヘッダーが固定されたページがあります。ヘッダーが常に固定されているが、ページ全体が垂直方向に中央揃えされるように、ページ全体を垂直方向に中央揃えにする必要があります。

負のマージンと絶対配置をいじるだけではないため、どのように実行できるかわかりません（少なくとも、機能する解決策を見つけることができませんでした...）。私はjsFiddleを作成しました...

システムからコードを追加するように求められているため、jsFiddle で確認できる基本的な構造を次に示します。

<body>
    <div id="header"><h1>HEADER</h1></div>
    <div id="content">
        <p>This is some content.</p>
    </div>
</body>
4

3 に答える 3

0

100vhこれは、フレックスボックスとメインコンテナの測定で非常に簡単に実現できます。

CSS:

height: 100vh;
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex-direction: column;
-webkit-flex-direction: column;

完全なデモを見る: https://jsfiddle.net/f8syhrkv/

于 2016-01-05T11:57:35.863 に答える