min-height:100% 不适用于嵌套 div

Question

我有一个容器 div，包含 3 个 div、一个侧边栏、一个内容和一个标题，而里面的所有元素都按应有的方式呈现（如果这可能会影响我的问题，它们被定位为“相对”），侧边栏并且内容无论如何都不会呈现 min-height: 100%;...

我的 div 不会像它应该的那样以最小高度拉伸...

这里是代码：http://jsfiddle.net/vhZV6/4/

如您所见（我放了一个白色背景以最好地识别它）应该拉伸的 div 根本不会......

编辑：这是一个临时站点，我尝试在其中实施解决方案...http://www.wabisuke-team.org/Temp/home.html 如您所见，除了最后 2 页（strees 和“contattateci”）之外的所有页面都按应有的方式呈现，但那些 2虽然 div 中有一个混乱的背景图像，但没有按照应有的方式调整大小......

编辑： 我通过以像素而不是百分比为单位的最小高度解决了这个问题，它现在可以按我的意愿工作，感谢大家的努力和耐心^^

Answer 1

使用高度：100%，不需要最小高度见这里http://jsfiddle.net/vhZV6/5/

html{
    height:100%;
}
body {
    display:block;
    height:100%;
    margin: 0;
    padding: 0;
    overflow:auto;
    /* just some back ground and graphical tweeks*/

    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    color:#000000;
    background: #86acef; /* Old browsers */
    background: -moz-linear-gradient(top,  #86acef 0%, #baceef 35%, #86acef 70%, #baceef 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#86acef), color-stop(35%,#baceef), color-stop(70%,#86acef), color-stop(100%,#baceef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #86acef 0%,#baceef 35%,#86acef 70%,#baceef 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86acef', endColorstr='#baceef',GradientType=0 ); /* IE6-9 */

}
/* ~~this fixed width container surrounds the other divs~~ */
.container {
    height: 100%;
    container:overflow;
    display:block;
    position:relative;
    width: 1000px;
    background: #FFF url(../img/Graphic/bg.jpg) no-repeat  fixed center;
    background-size:100% 100%;
    background-position:center;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
.header {
    position:relative;
    /* header graphical tweeks */

    background: #2945c4; /* Old browsers */
    background: -moz-linear-gradient(top,  #2945c4 0%, #7db9e8 35%, #2945c4 70%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2945c4), color-stop(35%,#7db9e8), color-stop(70%,#2945c4), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #2945c4 0%,#7db9e8 35%,#2945c4 70%,#7db9e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2945c4', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.sidebar1 {
    position:relative;
    float: left;
    width: 180px;
    height:100%;
}
.content {
    position:relative;
    padding: 10px 0;
    width: 780px;
    float: left;
    height:100%;
    background: #FFF;
    background-size:100% 100%;
    background-position:center;
}
​

Answer 2

这里是长内容的小提琴http://jsfiddle.net/xM4NC/

这里是简短的http://jsfiddle.net/xM4NC/1/

我将 body 设置为 height 100%，但内容 div 设置为 min-height 100%。这样它的父级就有了一个定义的高度，这样 div 将至少和身体一样高，但如果有必要，它会超出它。然后添加一个左边距并将侧边栏浮动在该空间中

body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#content {
    background: #EEE;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 0 20px 0 20px;
    margin: auto;
    margin-left: 180px;
    font: 1.5em arial, verdana, sans-serif;
    width: 960px;
    min-height: 100%;
}

和html

<div class="header">header</div>
<div class="sidebar1">sidebar</div>
<div id="content">
    text
</div>​