左右结构图文设置html,前端笔记:左右结构中,如何做到左右高度自适应?

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

有这样一种页面结构:

left

right

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

bVF1Bb?w=1176&h=136

这就尴尬了~咋办呢?有的同学就给出了以下的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+才能实现,而且在移动端也有一定得兼容性问题

参考资料

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值