将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的同一个点开始 关闭Div标签

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