Question

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

我的div不会延伸到最小高度，因为它应该......

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

正如你所看到的那样（我把白色背景最能识别出来）这个div应该伸展的根本不会...

编辑：这是一个临时网站，我试图实现解决方案... http://www.wabisuke-team.org/Temp/home.html，你可以看到，除了最后两页（strees和“contattateci”）以外的所有页面都按照它们应该呈现，但是那些2虽然有一个混乱的背景图像没有调整大小应该... ...

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

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/

我将身体设置为高度100％，但内容div为最小高度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>

min-height：100％不适用于嵌套div

2 个答案: