前端笔记：左右结构中，如何做到左右高度自适应？

gyl_coder 发布于2019-08-30 13:09 / 1668人阅读

摘要：优点实现简单，父容器不用设置具体高度值缺点依然存在需要清除浮动的举动，因为父容器没有设置方案三使用来实现优点将父容器的设置为，将子元素设置为，让左右结构表现为一样，那么就具有的一些特性列高度自适应上下居中等等。

相信大家一看到这个题目，有些同学就会叫到：“我也遇到过这样的问题！”，这具体是什么问题呢？

有这样一种页面结构：


    
        left
    
    
        right

这样的页面结构相信大家经常会遇到，但是这样的结构会出现什么问题呢？经常会遇到，当左边的内容没有右边那么多或者反过来时，就困惑了，左边高度不会跟右边保持一致啊！具体表现如下图：

这就尴尬了~咋办呢？有的同学就给出了以下的css，期待能够解决这个问题：

.container {
    overflow: hidden;
}
.container .left, .container .right {
    float: left;
}
.container .left {
    width: 20%;
    height: 100%; /* 可惜不行哦。 */
}
.container .right {
    width: 80%;
}

结果就是，too 样 too simple~

可以看到，这个办法是行不通的，为什么呢？为什么设置了height为100%却不像预期的那样呈现呢？其实这里面没有正确理解height这个值的设置，具体可以看看MDN的height解释。

几种解决方案： 方案一

给最外的元素设置具体的高度值：

.container {
    overflow: hidden;
    height: 100px;
}
.container .left, .container .right {
    float: left;
}
.container .left {
    width: 20%;
    height: 100%; 
}
.container .right {
    width: 80%;
    height: 100%;
}

这样就可以了，因为子元素的高度使用百分比时，是使用父元素的高度来进行计算的，如果父元素没给出具体的高度，那么会使用auto，而auto由浏览器来计算高度，浏览器计算出来的高度只会是元素的内容高度，所以为什么外部元素不设置高度时，内部元素不会自适应高度.

优点

完美解决左右子元素高度不一致问题

缺点

必须设置外部容器的具体高度，当外部容器的高度不定时，问题就头疼了

子元素设置浮动，如果不设置overflow:hidden，则必须清除浮动，带来不必要的麻烦

方案二

不设置外部元素的具高度，而设置root元素的高度为100%；

html,body {
    height: 100%;
}
.container {
    height: 100%/inherit;
    clear: both;
}
.container:after {
    display: block;
    content: " ";
    clear: both;
}
.container .left, .container .right {
    float: left;
}
.container .left {
    width: 20%;
    height: 100%/inherit; 
}
.container .right {
    width: 80%;
    height: 100%/inherit;
}

根据规范和方案一的经验，我们可以知道，当父容器设置了100%时，计算的高度会去找父容器，如果父容器无设置具体值，则会一直向上找，一直找到root元素，那么我们设置root元素为100%，root元素的高度是100%了，当前容器就计算出来是100%了。当然当前元素使用inherit也是可以的，继承于父元素的计算方式。

优点

实现简单，父容器不用设置具体高度值

缺点

依然存在需要清除浮动的举动，因为父容器没有设置overflow:hidden;

方案三

使用display来实现：

.container {
    display: table;
    width: 100%;
}
.container .left, .container .right {
    display: table-cell;
}
.container .left {
    width: 20%;
}
.container .right {
    width: 80%;
}

优点

将父容器的display设置为table，将子元素display设置为table-cell，让左右结构表现为table一样，那么就具有table的一些特性：列高度自适应、上下居中等等。

缺点

暂未发现

方案四

使用相对定位和绝对定位来实现

.container {
    position: relative;
}

.container .left {
    position: absolute;
    width: 20%;
    height: 100%;
}
.container .right {
    margin-left: 20%;
    width: 80%;
    height: 100%;
}

优点

代码量少，实现简单，兼容性高

缺点

position：relative带来的一些问题（不详细述说，请读者自行挖坑）

方案五

使用flex和设置height实现

html,body{
    height: 100%;
}
.container {
    display: flex;
    height: 100%;
}

.container .left {
    width: 20%;
}
.container .right {
    width: 80%;
}

优点

实现起来非常简单，简单几行代码即可

缺点

兼容性问题，IE10+才能实现，而且在移动端也有一定得兼容性问题

参考资料

MDN

w3规范

GPU云服务器云服务器高度自适应 textarea自适应高度 iframe高度自适应 iframe自适应高度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115337.html

CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
CSS布局说——可能是最全的

摘要：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。这些相对于布局来说是基础的，同时也是非常重要的。可以看到，浮动元素，其实对于布局来说，是特别危险的。前言现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思...

hearaway 2019-08-30 15:53 评论0 收藏0
圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

Clect 2019-08-02 16:17 评论0 收藏0
圣杯布局和双飞翼布局

摘要：比起双飞翼布局，它的起源不是源于对页面的形象表达。一起来看看这两种布局的区别在哪一双飞翼布局可以看到，我们在里面又加了一个内容层。稍微了解前端的人都知道，圣杯布局和双飞翼布局是前端面试时必问的问题，因为它既能体现你懂HTML结构又能体现出你对ＤIV+CSS布局的掌握，毕竟我们学习CSS主要就是为了更好地布局带来最好的用户体验嘛~ 事实上，圣杯布局其实和双飞翼布局是一回事。它们实现的都...

468122151 2019-08-30 10:49 评论0 收藏0