Question

我正在尝试使用页眉和页脚创建两个列布局，以便左栏，页眉和页脚保持固定，水平和垂直滚动应该出现在主要内容上自动我已经实现的目标是

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

Answer 1

在页脚添加空div之前清除：两者都在样式中。

Answer 2

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

主要内容已有滚动条，取决于内容量。

我制作了这个例子http://jsfiddle.net/jackJoe/pADyc/，减少了主要内容的高度，以便您可以看到效果。

编辑：这样你就不会感到困惑，我更改了主要内容，使其具有原始高度，并且内容很多，显然会显示垂直卷轴：http://jsfiddle.net/jackJoe/pADyc/1/

现在你可能会询问水平卷轴......好吧，如果内容水平溢出，它只会显示它们，这只发生在块元素中（div宽度更宽，图像，文本无法包裹，你得到照片）。

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

2 个答案: