布局—一侧固定宽度，一侧自适应

1.固定宽度区域浮动，自适应区域不设宽度而设margin

注意：sidebar必须在content之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;*zoom:1;}
        #sidebar,#content{background-color: red;height: 300px;}
        #sidebar{float: right;width: 300px;}
        #content{margin-right: 310px; }
        #footter{background-color: yellow;color: red;margin-top: 10px;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="sidebar">固定宽度</div>
        <div id="content">自适应部分</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

2.固定宽度绝对定位，自适应区域使用margin

注意：此时，wrap限制不了sidebar，可以给其加固定高度；绝对定位的特性，可先重置默认样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;}
        #sidebar,#content{background-color: red;height: 100%;}
        #sidebar{width: 300px;position: absolute;right: 0;top: 0;}
        #content{margin-right: 310px; }
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="sidebar">固定宽度</div>
        <div id="content">自适应部分</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

3.使用浮动和margin

注意：content宽度需要重新设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;}
        #sidebar,#content{background-color: red;height: 100px;}
        #sidebar{width: 300px;float: right;}
        #content{margin-left: -310px;float: left; width: 100%;}
        #content-box{margin-left: 310px;}
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="content">
            <div id="content-box">
                自适应部分
            </div>
        </div>
        <div id="sidebar">固定宽度</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

4.使用display：table

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #wrap{overflow: hidden;display: table;width: 100%;}
        #sidebar,#content{background-color: red;height: 100px;}
        #sidebar{width: 300px;display: table-cell;}
        #content{display: table-cell;width: 100%;}
        #footter{background-color: yellow;color: red;margin-top: 1em;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="content">
            自适应部分
        </div>
        <div id="sidebar">固定宽度</div>
    </div>
    <div id="footter">底部</div>
</body>
</html>

敢想，敢做

相关阅读:
Flink命令行提交job (源码分析)
Flink 中LatencyMarks延迟监控（源码分析）
Flink中的CEP复杂事件处理 (源码分析)
Flink中异步AsyncIO的实现 (源码分析)
Flink中发送端反压以及Credit机制(源码分析)
Flink中接收端反压以及Credit机制 (源码分析)
Flink整合oozie shell Action 提交任务带kerberos认证
 Flink中TaskManager端执行用户逻辑过程(源码分析)
Flink的Job启动TaskManager端(源码分析)
Flink中Idle停滞流机制(源码分析)
原文地址：https://www.cnblogs.com/ZL8655/p/5702490.html