8

ページを水平方向に半分に分割しようとしています。HTML/CSSだけで実現したいのですが、JSは使いたくないです。私は何を間違っていますか？

ありがとう

CSS

#container {
min-height:100%;
}

#top_div {
height:50%;
width:100%;
background-color:#009900;
margin:auto;
text-align:center;
}

#bottom_div {
height:50%;
width:100%;
background-color:#990000;
margin:auto;
text-align:center;
color:#FFFFFF;
}

HTML

<div id="container">

<div id="top_div">top</div>    
<div id="bottom_div">bottom</div>

</div>
4

4 に答える 4

10

これを試して：

body, html, #container {
  height: 100%;
}
于 2013-01-07T18:17:46.577 に答える
7

#containerこのように最初のCSSブロックを変更してみてください

#container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

コンテナにウィンドウの高さとウィンドウの幅があるより...

より良い解決策として、コンテナ内の上部と下部の要素で同じことを行います。それらを位置に設定し、すべての上、左、... プロパティをゼロに設定します。上の要素では下を 50% に設定し、下の要素では上を 50% に設定します。

#top_div {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50%;
    background-color:#009900;
    text-align:center;
}

#bottom_div {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    bottom: 0;
    background-color:#990000;
    text-align:center;
    color:#FFFFFF;
}

デモ

于 2013-01-07T18:17:41.860 に答える
0

私があなたを正しければ、あなたがやろうとしていることは次のとおりです: - 2 列のページを作成します。

1 つの div 要素を親として、2 つの子 div 要素を使用して、親に position:relative を割り当てます。これにより、コンテナが作成され、position:absolute が子要素に割り当てられ、幅を使用して特定の領域が割り当てられます。

于 2013-01-07T18:48:22.023 に答える