html - HTML-本文が下に伸びているWebページの例？

Question

Microsoftのホームページ（http://www.microsoft.com/en-us/default.aspx）で、白い背景が下部と側面に灰色で伸びているのがわかりますか？

HTML / CSSでどのようにそれをしますか？つまり、私は試してきましたが、DIVが完全に下がることはありません...

ヘルプ？

score 1 · Accepted Answer

ええと、彼らのページには、ページを強制的にスクロールさせるのに十分なコンテンツがあります。このような

十分なコンテンツがない場合は、divの高さを100％に設定できます。ここで注意すべき重要なことは、親の高さの100％になるということです。そのため、HTMLと本文の高さも100％に設定する必要があります。デモ

html, body {
  height: 100%;
}
#contentDiv {
    height:100%;
}

HTML

<body>
    <div id="contentDiv">my content here</div>
</body>

score 0 · Accepted Answer

bodyファイルとhtmlファイルの高さも100％であることを確認する必要があります。これは、親要素の現在の高さから100％が取得されるため、設定した場合、htmlの親はウィンドウ（ドキュメント）であるため、フルハイト

html,body{
height:100%;
width:100%;
background:gray;
}
div{
height:100%;
width:100%;
background:red;
}

あなたは赤いページを取得します

score 0 · Accepted Answer

高さを％100に設定し、親要素をposition：relativeに設定すると、物事がまっすぐに設定される場合があります。あなたのhtmlとcssを投稿してください。

3 に答える 3