css - stacking DIVs one below another vertically

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;
}

Unable to stack DIVs (topdiv, maindiv) vertically one below the other. What am i doing wrong?

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不是自闭标签。

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 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

如果您不关闭 div 标签，则下一个 div 从第一个 div 的同一点开始关闭 Div 标签

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