jquery - 没有内容的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

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

您会看到标题的高度被移除(因为它试图达到整个页面的高度)，并且高度 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; 
}