zoukankan html css js c++ java

左侧固定右侧宽度自适应

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

查看全文

相关阅读:
SQL整理5
SQL整理1 数据类型
 SQL整理2
JavaScript 的DOM操作
 JavaScript 数据类型
 JavaScript
CSS样式表
 sqlserver数据库提纲
 Python基础第十二天：二分法算法
 Python基础第十一天：递归函数

原文地址：https://www.cnblogs.com/ganler1988/p/3197581.html

左侧固定 右侧宽度自适应

左侧固定右侧宽度自适应