左侧固定 右侧宽度自适应 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        body {
            color: #FFF;
            font-size: 24px;
            text-align: center;
        }

        .left {
            width: 120px;
            height: auto !important;
            height: auto;
            min-height: 300px;
            float: left;
            background: #F00;
        }

        .right {
            width: 100%;
            height: 300px;
            background: #36F;
        }

        .container {
        }

        .foot {
            width: 100%;
            height: 30px;
            background: #000;
        }
    </style>
</head>

<body>
<div class="container">
    <div class="left">
        左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>左<br/>
    </div>
    <div class="right">右</div>
    <div style="clear:both"></div>
</div>
<div class="foot">footer</div>
</body>
</html>

 

posted @ 2013-07-18 10:15  Ganler1988  阅读(241)  评论(0)    收藏  举报