将DIV垂直堆叠在另一个下方

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?

无法将DIV(topdiv,maindiv)垂直堆叠在另一个之下。我究竟做错了什么?

5 个解决方案

#1

What you are doing wrong is really basic thing, you are self closing the div element tags, thus it renders incorrectly.

你做错了什么是非常基本的事情,你是自我关闭div元素标签,因此它渲染不正确。

Correct Syntax

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

You cannot self close the div tags

你不能自己关闭div标签

Demo

Click here to validate your HTML documents

单击此处验证您的HTML文档

#2

try this

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

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

CSS

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

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

You must close the div tags

您必须关闭div标签

#4

First, when you use a percentage for width/height, it's based on the parent element (width/height), which you didn't define. Second, div is not a self-closing tag.

首先,当您使用宽度/高度的百分比时,它基于您未定义的父元素(宽度/高度)。其次,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;
}

Working example: http://jsfiddle.net/QJC8x/

工作示例:http://jsfiddle.net/QJC8x/

#5

If you will not close div tag, next div start from same point of first div Close Div tag

如果你不关闭div标签,下一个div从第一个div的相同点开始关闭Div标签

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