具有页眉和页脚的两列页面布局 [英] Two column Page layout with header and footer
问题描述
我试图创建两个栏布局与页眉和页脚，所以左栏，页眉和页脚保持固定和水平和垂直滚动应该出现在主要内容在汽车我已经实现了
I am trying to create two column layout with header and footer so that left bar, header and footer remains fixed and horizontal and vertical scroll should appear on main content on auto what i have achieved so for is
<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>
推荐答案
在这种情况下你真的不需要 clear：both ，因为左侧导航和主要内容都有相同的高度，但是请注意左侧导航也有 overflow：auto ，它也会显示该块的滚动（如果你有很多内容）。
In this case you really won't need the clear: both because both the left nav and the main content have the same height, but mind you that the left nav also has overflow: auto and it will also show the scroll for that block (if you have a lot of content there).
主要内容已经有滚动，它取决于内容量。
The main content already has the scrolls, it depends on the amount of content.
我这个例子 http://jsfiddle.net/jackJoe/pADyc/ ，减少主要内容的高度，以便您可以看到效果。
I made this example http://jsfiddle.net/jackJoe/pADyc/, reducing the height of the main content so that you can see the effect.
编辑：为了不让你感到困惑，我改变了主要内容，以便它有原始的高度，有很多内容，它显然显示垂直卷轴： http://jsfiddle.net/jackJoe/pADyc/1/
Just so you don't be confused, I changed the main content so that it has the original height, and with a lot of content, it obviously shows the vertical scrolls: http://jsfiddle.net/jackJoe/pADyc/1/
现在你可能会问关于水平滚动...嗯，它只会显示它们，如果内容水平溢出，这只发生在块元素（div具有更宽的宽度，图像，文本，不能被包装，你得到的图片）。
And now you may ask about the horizontal scrolls... Well, it will just show them if the content overflows horizontally, which only happens with block elements (div with a wider width, images, text that cannot be wrapped, you get the picture).
这篇关于具有页眉和页脚的两列页面布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
