如何在三个固定容器之间放置动态内容容器[重复]答案

【问题标题】：How to fit dynamic content container between three fixed containers [duplicate]如何在三个固定容器之间放置动态内容容器[重复]
【发布时间】：2013-08-03 05:55:12
【问题描述】：

这是我的代码。 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 仅填充标题、右侧菜单和左侧菜单之间的可用空间？

【问题讨论】：

这里的问题到底是什么？
如何使maincontent 适合headmenu、leftmenu 和rightmenu？
你的问题一点都不清楚，你在问什么？为什么要将 maincontent 放在其他 3 个元素中，这是没有意义的。

标签： html css positioning

【解决方案1】：

将.maincontent 更新为：

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

无需指定此块级元素的宽度（因为您希望它填满屏幕减去边距）。如果没有正确的box-sizing，边框会添加滚动条。

您可能还想重置 CSS；

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

【讨论】：

哦，就是这样..该死的，谢谢。 :) 感谢那些无缘无故投票反对的混蛋。

【解决方案2】：

我会使用position:absolute;我在手机上，所以只能给出你的代码的一般示例

演示http://jsfiddle.net/kevinPHPkevin/LuSBF/3/

【讨论】：