штабелирования DIVs один ниже другого по вертикали

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

Невозможно стек DIVs (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>