{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Luminary・发光体 的问题《Two column Page layout with header and footer》','https://www.manongdao.com/q-970329.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
Before the footer add in the empty div clear: both in the styling.
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).