布局之左侧固定，右侧自适应

更新日期: 2019-08-21阅读: 2.1k标签: 自适应分享

复制链接

新浪微博

QQ 好友

扫一扫分享

1，固定侧左浮动，右侧设置margin

给左边的固定宽度区left浮动并设置一个宽度，右边的自适应区right只设置margin值，假设right的宽度是100%，那么设置margin后，它得宽度就变为100%-margin；left发现自己的宽度可以和right挤在同一行，它就浮动上来了

<style>	
	#main{
        overflow:hidden;/*清除浮动*/
    }
    #left{
        float:left;
        width:300px;
        background:red;
    }
     #right{
        margin-left:310px;
        background:#666;
   }
    #footer{
        height:50px;
        background:#ccc;
        margin-top:10px;
    }
</style>
<title>宽度自适应</title>
</head>
<body>
<div id="main">
    <!--这种方法必须把固定宽度区写在前面，否则布局不了-->
    <div id="left" style="height:400px;">content我是固定宽度区</div>
    <div id="right" style="height:300px;">sider我是自适应区</div>

</div>
<div id="footer">footer</div>

记得清除浮动，这样不管left和right谁更长，footer都不会错位，不会对布局造成影响；
但是，这种方法必须让固定宽度区写在自适应区前面。

2,固定宽度区使用绝对定位，自适应区设置margin

若想把自适应区right写在前面，给right设置margin值，需要给left固定宽度区设置绝对定位，在此之前把父元素main设置为相对定位relative，让left的绝对定位是相对于main而不是相对于整个网页。

<head>
    <meta http-equiv="Content-type" type="text/html; charset=utf-8" >
    <style type="text/css">
        div{
            margin:0;
            padding:0;
        }
        #main{
            position:relative;
        }

        #left{
            position:absolute;
            top:0;
            left:0;
            width:300px;
            background:red;
        }
          #right{
            margin-left:310px;
            background:green;
       }

        #footer{
            height:50px;
            background:#ccc;
            margin-top:10px;
        }
    </style>
    <title>宽度自适应</title>
</head>
<body>
    <div id="main">
        <div id="right" style="height:300px;">right我是自适应区</div>
        <div id="left" style="height:400px;">left我是固定宽度区</div>
    </div>
    <div id="footer">footer</div>
</body>

链接: https://fly63.com/article/detial/5419

布局之左侧固定，右侧自适应

1，固定侧左浮动，右侧设置margin

2,固定宽度区使用绝对定位，自适应区设置margin

html中map area 热区自适应的原生js实现方案

WKWebView加载的网页自适应大小

iframe 自适应高度的多种实现方式

移动端自适应

HTML+Css让网页自动适应电脑手机屏幕

CSS实现自适应正方形、等宽高比矩形

echarts 表格自适应需要注意的问题

css弹性盒模型实现元素宽度（高度）自适应

web页面实现等比例缩放自适应 - 通过 rem 和 vw 实现

vuejs中拖动改变元素宽度实现宽度自适应大小