1

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

<!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>

​</p>

4

3 回答 3

2

这似乎做你想做的事：

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

绝对定位#middleContainer与#footerContainer正常流程无关。#middleContainer被迫占据整个页面的大小，但会留出一个边距，以便为页眉和页脚留出空间。#footerContainer用 固定在页面底部bottom: 0。那么左右两列就可以只用height: 100%占用右边的空间了，但是中间的列仍然需要绝对定位来强制它只占用剩余的空间。

于 2012-10-04T08:44:50.863 回答
1

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

嗨玛雅我建议你可以在你的代码中使用表格属性，如果是的话，而不是检查这个演示

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;

}

现场演示

于 2012-10-04T08:26:51.753 回答
0

#footerContainer将两者的高度指定#headerContainer为百分比而不是像素，就像对其他 div 执行相同操作一样。在这个小提琴中，我将 10% 用于页眉和页脚，将 80% 用于所有中间 div。

于 2012-10-04T08:28:58.140 回答