没有内容的Div高度

Question

您好，

我真的不知道如何解决这个问题，因为我有一些页面没有任何内容，但模板的结构会使页面的其余部分留空。

我试图用css或jquery应用一些不同的技术，但我找不到解决方案。有人可以帮助我吗？

这是目前的代码：

html {
height: 100%;
}

body {
margin: 0;
padding: 0;
height: 100%;
font-size: 12px;
font-family: 'Tahoma' sans-serif;
color: #1c1c1c;
}

#wrapper {
min-height: 100%;
}


/* Header  */

header {

width:100%;
background:#454545;
 height: 100%;

}

#main {  
overflow:hidden;
}


 .content {
width:86%;
    height: 100%;
padding:10px;
margin-left:5px;
float:left;
background:#FFF;


}  

 .sidebar {  
padding:1px;
width:12%;
background:#FF8500; 
float:left;
padding-bottom: 30000px;
    margin-bottom: -30000px;

}

footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
padding:10px;
background:#000;
text-align:right;
color:#FFF; 
}

我分享了html：http://jsfiddle.net/7r2SG/2/

Answer 1

您是否只是想将内容区域向下移动以使其更大？如果是这样，请将此样式添加到#main：

min-height：500px;

Answer 2

编辑：修正了错误。 基本上要设置元素的高度，首先需要知道父高度。

您将看到从标题中删除的高度（因为它尝试转到整页高度），并且高度100％添加到所有父元素，例如wrapper，main，body，html。 min-height 100％也添加到主元素中。

html {
     height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 12px;
    font-family: 'Tahoma' sans-serif;
    color: #1c1c1c;
}

#wrapper {
    min-height: 100%;
    height:100%;
}


/* Header  */

header {

 width:100%;
 background:#454545;


}

#main {  
   overflow:hidden;
    height:100%;
    min-height:100%;
}

.nav {
    background:#FF8500;
    margin:0;
    padding:2px;
    height:100%;
    min-height:100%;

}

.nav ul {

    padding:2px 10px;
    list-style: none;
}

.nav li {
    width:100%;
    height:30px;
    padding: 0;
    margin:5px 0;
}

.nav li a {
    text-align: left;
    color: #FFF;
    font-size: 14px;
    display: list-item;
    padding: 5px;
}
 .content {
    width:86%;
    height: 100%;
    padding:10px;
    margin-left:5px;
    float:left;
    background:#FFF;
}  

 .sidebar {  
    padding:1px;
    width:12%;
    background:#FF8500; 
    float:left;
    padding-bottom: 30000px;
    margin-bottom: -30000px;
}

footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
    padding:10px;
    background:#000;
    text-align:right;
    color:#FFF; 
}

Answer 3

使用{= 1}}的纯粹css解决方案，使用浮点数来实现垂直空间是很困难的。

http://jsfiddle.net/cKtg2/