html - 垂直方向の中間コンテンツと固定下部フッターを使用するにはどうすればよいですか?

Question

私はこれを持っています

<body>
<div>
  <div class="wrapper">
     <div class="wrapper-content">
     </div>

     <footer>
     </footer>
  </div>
</div>
<body>

ラッパーコンテンツを垂直方向に中央に配置し、フッターを常にページの下部に固定したいですか?

score 1 · Accepted Answer

高さが固定されている場合#wrapper-content、あなたは幸運です：

#wrapper-content
{
    position: relative;
    height: 400px;
    top: 50%;
    margin-top: -200px; /* minus 1/2 times the height */
}

高さが変わる可能性がある場合は、次を使用してコンテンツを垂直方向に中央揃えできますdisplay: table-cell。

#wrapper
{
    display: table;
}

#wrapper-content
{
    display: table-cell;
    vertical-align: middle;
}

フッターには、絶対配置または固定配置を使用します。

footer
{
    position: absolute; /* or fixed */
    width: 100%;
    left: 0;
    bottom: 0;
}

score 1 · Accepted Answer

これを試すことができます：-

.wrapper {
height: 200px;
width: 500px;
}

.wrapper-content {
position: relative;
top: 50%;
}

.footer {
position: absolute;
bottom: 0px;
}

score 1 · Accepted Answer

上記のように、それを行うには css を使用する必要があります。css ファイルで、ラッパー用に新しい ID セレクターを作成し、フッター one: 用に別の ID セレクターを作成<div id="wrapper">し、css ファイルに次のコードを追加します。

#wrapper{
margin-left:auto;
margin-right:auto;
width:400px;
}

フッターの場合、css に別の ID を追加します。

#footer{
position:absolute;
bottom:0;
width:100%;
height:50px;   /* Height of the footer */
}

それが役に立てば幸い：）

3 に答える 3