html设置左右盒子,css--常见左右盒子宽度高度自适应布局

前言

前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页，这就缺少不了必要的网页布局，首先看下最近小伙伴问我的一个问题，他说一个网页有左右两个部分，左右两个部分的高度都不固定，要使得右部分的宽度充满剩余的部分，并且高度随着左边的高度发生自适应，而左侧的高度随着内容的高度发生变化，对于这么一个简单的网页布局，对于一个入行不久的小白来说遇到这样的问题肯定束手无策，本文就来整理一下我实现这种布局的集中方案。

正文

分析上面的需求，很快构建出基础的布局方案，首先左右宽度自适应的不难，高度的呢？具体效果如下：下面是总结的几种实现方案：

1.高度height:auto

首先来了解下 height:100% 和 height:auto 的区别，height:100%,是指相对父元素高度而定义的高度，也就是按它最近且有定义的高度的父元素来定义高度，height:auto 是根绝块内内容的高度来调节高度。看到这里你可能会觉得把右边盒子通过设置height:100% 来继承父元素的盒子即可，但是如果你仔细看需求，左边盒子高度也是随内容的高度称大，所以这种方案行不通。因此需要使用height:auto来搭配flex布局来实现。

}.left{width:800px;border:1px solid red;

}.item1{width:100%;height:200px;border:1px solid black;

}.item2{width:100%;height:50px;border:1px solid black;

}.item3{width:100%;height:80px;border:1px solid black;

}.right{flex:1;height:auto;border:1px solid red;display:flex;

}.item4{flex:1;

}

1