堆疊的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標籤

Demo

Click here來驗證你的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

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 4

首先，當你使用寬/高的百分比，它是基於父元素（寬/高），你沒有定義的。 二，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/

Answer 5

如果您不會關閉div標籤，從同一個點第一個div 的下一格開始關閉分隔標籤

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