带有页眉和页脚的两列页面布局答案

【问题标题】：Two column Page layout with header and footer带有页眉和页脚的两列页面布局
【发布时间】：2011-05-21 08:50:31
【问题描述】：

我正在尝试创建带有页眉和页脚的两列布局，以便左栏、页眉和页脚保持固定，并且水平和垂直滚动应该出现在 auto 的主要内容上，我所取得的成就是

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Untitled Document</title>

<style type="text/css">

    .header{width:100%;}
    .left_panel{float:left; width:15%; height:500px; overflow:auto;background-color:#99CCFF;}
    .right_panel{float:left; width:85%; height:500px; overflow:auto;background-color:#FFFFCC;}
    .footer:{width:100%;margin-top:5px;}


</style>
</head>

<body>
    <div class="header">

        <h3>HEADER!</h3>

    </div>
    <div class="left_panel">Left Panel</div>
    <div class="right_panel">
            <p class="grey">

        Main content
        </p>


    </div>

    <div style=""></div>

    <div class="footer"><h3 align="center">Footer!</h3></div>

</body>
</html>

【问题讨论】：

标签： css layout graphics html

【解决方案1】：

在页脚之前添加空 div clear: both 在样式中。

【讨论】：

我没有添加清除 div，因为我使用的是 100% 宽度，所以我认为上面的代码不需要它。在符合我要求的修改版本中，可能需要:)
我试过了，页脚似乎没问题。
如果主上下文有足够的内容，滚动确实会出现。
添加 margin-top: 100px 到页脚。没有明确它不起作用

【解决方案2】：

在这种情况下，您真的不需要clear: both，因为左侧导航和主要内容具有相同的高度，但请注意左侧导航也有overflow: auto，它还会显示滚动那个块（如果那里有很多内容）。

主要内容已经有卷轴了，视内容量而定。

我做了这个例子http://jsfiddle.net/jackJoe/pADyc/，降低了主要内容的高度，这样你就可以看到效果了。

编辑：为了不要混淆，我更改了主要内容，使其具有原始高度，并且内容很多，它显然显示垂直滚动：http://jsfiddle.net/jackJoe/pADyc/1/

现在你可能会问关于水平滚动的问题......好吧，如果内容水平溢出，它只会显示它们，这只会发生在块元素（宽度更宽的div，图像，无法换行的文本，你获取图片）。

【讨论】：

从您的示例中删除 clear 并且它会中断。将 margin-top: 100px 添加到页脚。没有明确它不起作用
@George Kastrinis 当然会中断，但是使用 OP 代码不会中断，如果两个 div 具有相同的高度并占据整个宽度，则无法中断，请检查我的第二个 jsfiddle 并删除clear: both 自己看看 :)
我也需要在主要内容中水平滚动你可以指导
@Tassadaque 阅读我的编辑，如果内容在水平方向溢出，水平滚动将显示，如果是文本，通常浏览器会将其换行到下一行，但尝试使用宽于主要内容，卷轴出现。