带有页眉和页脚的两列页面布局
我正在尝试创建带有页眉和页脚的两列布局，以便左栏、页眉和页脚保持固定，水平和垂直滚动应该出现在自动的主要内容上，我所实现的目的是
<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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在页脚之前添加空 div clear: 都在样式中。
Before the footer add in the empty div clear: both in the styling.
在这种情况下，您确实不需要
clear: Both因为左侧导航和主要内容具有相同的高度，但请注意左侧导航也有overflow: auto< /code> 并且它还会显示该块的滚动（如果那里有很多内容）。主要内容已经有了卷轴，取决于内容量。
我做了这个例子http://jsfiddle.net/jackJoe/pADyc/，减少了高度主要内容，以便您可以看到效果。
编辑：为了让您不要感到困惑，我更改了主要内容，使其具有原始高度，并且有很多内容，它显然显示垂直滚动： http://jsfiddle.net/jackJoe/pADyc/1/
现在你可能会问有关水平滚动的问题......好吧，它只会显示如果内容水平溢出，这种情况只会发生在块元素上（宽度较宽的 div、图像、无法换行的文本，您会得到图片）。
In this case you really won't need the
clear: bothbecause both the left nav and the main content have the same height, but mind you that the left nav also hasoverflow: autoand 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.
I made this example http://jsfiddle.net/jackJoe/pADyc/, reducing the height of the main content so that you can see the effect.
EDIT: 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/
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).