Question

任何想法如何使下面这段代码中的中间部分（jsFiddle here）调整到实际容器的高度而不指定固定值或Javascript？在这个小提琴中，我尝试为容器设置绝对和相对，但页面总是显示垂直滚动条，因为容器的高度超过了实际页面的高度。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        body { margin: 0; height:100%;}
        #mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
        #headerContainer { width: 100%; position: relative; background: #323232; color: white; height: 30px; }
        #middleContainer { height: 100%; }
        #leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
        #middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
        #rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
        #footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
    </style>
</head>
<body>
    <div id="mainContainer">
        <div id="headerContainer">
            headerContainer
        </div>
        <div id="middleContainer">
            <div id="leftSection">
                <div style="margin-top: 30px;">leftSection</div>
            </div>
            <div id="middleSection">
                <div style="margin-top: 30px;">middleSection</div>
            </div>
            <div id="rightSection">
                <div style="margin-top: 30px;">rightSection</div>
            </div>
        </div>
        <div id="footerContainer">
            footerContainer
        </div>
    </div>
</body>
</html>

Answer 1

这似乎可以做你想要的：

http://jsfiddle.net/grc4/XTQuT/2/

绝对定位需要#middleContainer和#footerContainer超出正常流量。 #middleContainer被迫占用整个页面的大小，但是有一个余地允许页眉和页脚的空间。 #footerContainer已使用bottom: 0固定在页面底部。然后左右列可以使用height: 100%占据正确的空间，但中间列仍然需要绝对定位以强制它仅使用剩余空间。

Answer 2

................................

嗨maya我建议你可以在你的代码中使用表格，如果是，请查看 demo

<强> HTML

<div class="wrap">

  <div class="header">header</div>
  <div class="conternt">
  <div class="left">Left sdaf dsaklf jdslkaf jdlskfj dlskafj dslkf jdslkf jsdlakfj sdlakfj sdlkf jlsdkfj sladkfj sdalkfj sadlkf </div>
  <div class="center">Center flexible</div>
  <div class="right">right</div>
  </div>
  <div class="footer">footer</div>

</div>

<强>的CSS

.header{
background:green;
  color:#fff;
  padding:20px;
}

.conternt{
background:yellow;
  display:table;
  width:100%;
}
.left, .right, .center{
display:table-cell;
  color:#fff;
}
.left, .right{
width:100px;
}
.left{
background:rgba(0,0,0,0.5)
}
.center{
background:rgba(0,0,0,0.1)
}
.right{
background:rgba(0,0,0,0.9)
}



.footer{
background:red;
  color:#fff;
  padding:20px;

}

的 live demo 的

Answer 3

将#footerContainer和#headerContainer的高度指定为百分比而不是像素，就像对其他div一样。在这个fiddle中，我给了页眉和页脚10％，并且80％给了所有中间格式的div。

不同页面尺寸的灵活DIV高度

3 个答案: