如何在三个固定容器之间安装动态内容容器

Question

这是我的代码。 http://jsfiddle.net/LuSBF/2/

<div class="headmenu"> 
    <div id="logo"></div> 
</div> 
<div class="leftmenu"> 
    left 
</div> 
<div class="rightmenu"> 
    right 
</div> 
<div class="maincontent"> 
    Lorem Ipsum i... 

    <div class="footer"> 
     footer 
</div> 
</div> 

前，左，右是固定的，.maincontent必须适合他们无论窗口的大小。当前.maincontent溢出可用空间并导致水平滚动条。

.headmenu { background: #141414; height: 60px; width: 100%; position: fixed; top: 0; } 
.leftmenu { background: #c11718; height: 100%; width: 100px; position: fixed; margin-top: 60px; top: 0; } 
.rightmenu { background: #141414; height: 100%; width: 200px; position: fixed; margin-top: 60px; right: 0; top: 0; } 
.footer { background: #141414; height: 60px; width: 100%; bottom: 0; } 

#logo { background: url('imgs/logo.jpg'); width: 181px; height: 50px; margin: 5px 0 0 0; } 

.maincontent { width: 79%; border: 1px solid blue; margin: 60px 200px 0 100px; } 

我怎样才能得到.maincontent填写只有标题，右键菜单和左侧菜单中的可用空间？

Answer 1

更新.maincontent这样：

.maincontent { margin: 60px 200px 0 100px; } 

没有必要指定该块级元素的宽度（因为你希望它填满屏幕减去边距）。没有正确的box-sizing边框会添加滚动条。

您可能还想重置您的CSS;

html, body { margin: 0; padding: 0; } 

Answer 2

我会用position:absolute;我在移动所以只能给你的代码

DEMO http://jsfiddle.net/kevinPHPkevin/LuSBF/3/