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>

查看全文

相关阅读:
flex布局知识总结
 js，ts操作dom总结
 编译原理语法树句柄简单短语短语
 linux基础命令期末考试总结
 arm汇编指令--str ldr
npm常用命令(原创)
JS获取图片的缩略图
 Spring MVC 返回Json IE出现下载
 jquery获取页面iframe内容
 MySQL 下 ROW_NUMBER / DENSE_RANK / RANK 的实现

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

左侧固定 右侧宽度自适应

左侧固定右侧宽度自适应