可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

Before the footer add in the empty div clear: both in the styling.

回答2:

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.

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