css - DIV を上下に垂直に積み重ねる

Question

HTML:

<div id="container">
    <div id="topdiv" />
    <div id="maindiv" />
</div>

CSS:

#topdiv {   
    height: 25%;   
    width:100%;  
    border:dashed;
}

#maindiv {  
    height: 75%;    
    width:100%;     
    border:solid;
}

DIV (topdiv、maindiv) を縦に積み重ねることができません。私は何を間違っていますか？

Answer 1

あなたが間違っているのは本当に基本的なことですdiv。要素タグを自己終了しているため、正しくレンダリングされません。

正しい構文

<div id="container">
    <div id="topdiv"></div>
    <div id="maindiv"></div>
</div>

divタグを自分で閉じることはできません

デモ

ここをクリックして HTML ドキュメントを検証します

Answer 2

これを試して

http://jsfiddle.net/QVPA3/1/

<div id="container">
    <div id="topdiv"></div>       
    <div id="maindiv"></div>
</div>

CSS

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

Answer 3

div タグを閉じない場合、次の div は最初の div の同じポイントから開始します。 Div タグを閉じる

<div id="container">
    <div id="topdiv"> </div>
    <div id="maindiv"> </div>
</div>

Answer 4

html:

<div id="container">
    <div id="topdiv"> </div>
    <div id="maindiv"> </div>
</div>

CSS:

    #topdiv {
        height: 25%;
        width:100%;
        border:dashed;
    }

    #maindiv {
        height: 75%;
        width:100%;     
        border:solid;
    }

div タグを閉じる必要があります

Answer 5

まず、幅/高さにパーセンテージを使用する場合、定義していない親要素 (幅/高さ) に基づいています。2 つ目divは、自己終了タグではありません。

HTML

<div id="container">
    <div id="topdiv"></div>
    <div id="maindiv"></div>
</div>

CSS

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

#topdiv {   
    height: 25%;   
    width:100%;  
    border:dashed;
}

#maindiv {  
    height: 75%;    
    width:100%;     
    border:solid;
}

作業例: http://jsfiddle.net/QJC8x/