前言

相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用。今天我们就来一探究竟

原因：父元素未设置具体高度，子元素设置height:100%是无效的。

现象以及方案

[1] 设置高度为100%时，无法实现全屏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        .case-box{

            height: 100%;

            background:red;

        }

    </style>

</head>

<body>

<div class="case-box"></div>

</body>

</html>

这样写，你会发现一点效果都没有。

【解决方案】

增加如下代码：

html,body{

    height: 100%;

}

[2] 一个父元素中包含2个子元素，其中一个子元素非常高，撑开了父元素，另外1个子元素设置高度为100%失效。

<style>

    .case-box{

        overflow: hidden;

    }

    .height-max{

        width: 200px;

        height:400px;

        background: #167be0;

        float:left;

    }

    .height-percent{

        margin-right:20px;

        background: hotpink;

        width: 200px;

        height: 100%;

        padding:20px;

        float:left;

    }

</style>

<div class="case-box clearfix" data-case="f2">

    <div class="height-percent"></div>

    <div class="height-max"></div>

</div>

height-max 设置了高度是400px撑开了父级使得父级case-box高度也是400px，height-percent设置了高度为100%，本来我们期望会跟父级的高速一样都是400px，可是它还是没有高度(背景色是padding撑起来的)。

平时的布局经常可以碰到这样的情况，需要根据一个块的高度进行高度自适应布局，但是好像单纯的设置高度为100%是无法实现的。

【方案一】

父元素case-box设置一个定高(视乎这样压根就满足不了我们的需求)

【方案二】

使用position

<style>

    .case-box{

        overflow: hidden;

        position: relative;

    }

    .height-max{

        width: 200px;

        height:400px;

        background: #167be0;

        float:left;

        margin-left: 220px;

    }

    .height-percent{

        margin-right:20px;

        background: hotpink;

        width: 200px;

        height: 100%;

        padding:20px;

        float:left;

        position: absolute;

    }

</style>

[缺点]这样使用会破坏原本的布局顺序

【方案三】

使用flex

<style>

    .case-box{

        position: relative;

        display: flex;

    }

    .height-max{

        width: 200px;

        height:400px;

        background: #167be0;

    }

    .height-percent{

        margin-right:20px;

        background: hotpink;

        width: 200px;

        padding:20px;

    }

</style>

不可否认flex布局还是非常方便的

[缺点]兼容性稍差

【方案四】

display: table

<style>

    .case-box{

        position: relative;

        display: table;

    }

    .height-max{

        width: 200px;

        height:400px;

        background: #167be0;

    }

    .height-percent{

        background: hotpink;

        width: 200px;

        display: table-cell;

    }

</style>

[缺点]margin失效

【最佳方案】

padding-bottom:3000px;margin-bottom:-3000px;

<style>

    .case-box{

        overflow: hidden;

        zoom:1;

    }

    .height-max{

        width: 200px;

        height:400px;

        background: #167be0;

        margin-left: 220px;

    }

    // 需要自使用的块设置好padding和margin

    .height-percent{

        background: hotpink;

        width: 200px;

        float:left;

        padding-bottom: 3000px;

        margin-bottom: -3000px;

    }

</style>

3000像素是个可变值，如果您的分栏高度不可能高度超过2000像素，您就可以设为2000像素，如果会超过3000像素，那么您要修改值为4000像素或是更高。

父标签的overflow:hidden属性是必须的，否则会显示溢出的内容

小结

通过本文学习了

为什么height设置百分比无效(因为父元素没有设置固定高度的原因)

以及如何实现高度自适用的布局方法

CSS难点 为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案的更多相关文章

  1. css中 出现height为100%失效的原因及解决方案

    我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...

  2. height设置100%不起作用

    详细讲解了原因:http://www.webhek.com/post/css-100-percent-height.html

  3. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  4. CSS设置height为100%无效的情况

    CSS设置height为100%无效的情况 笔者是小白,不是特别懂前端.今天写一个静态的HTML页面,然后想要一个div占据页面的100%,但是尝试了很多办法都没有实现,不知道什么原因. 后来取百度搜 ...

  5. 解决html设置height：100%无效的问题

    通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...

  6. CSS 如何让 height:100%; 起作用

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  7. height为100%的问题

    问题描述 很多同学,对于设置div 的高度为100%时,有疑惑. 设置div 的高度为100%,意思是此 div 的高度 铺满父元素. 那么 怎么使 div 铺满浏览器屏幕? 代码 <!DOCT ...

  8. 前端基础-CSS的属性相关设置

    一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一. 字体属性 1.font-weight:文字粗细(表格中*为重点) 取值 描述   normal 默认值,标准粗细 ...

  9. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

随机推荐

  1. 阿里云上的Centos 7.6的一次Nginx+Mysql+PHP7.3 部署

    阿里云申请了一台服务器 Centos 7.6,每次安装都要上网找一大堆教程,因为不熟悉,因为总是忘记. 所以,有时间的时候,还是记录下自己的学习过程,有助于下次的问题解决. 我先总结下: 1)安装VS ...

  2. daily english dictation 学习笔记[1-10]

    b站网址https://www.bilibili.com/video/av17188299/?p=2 1. Mother Teresa, who received a Nobel Peace Priz ...

  3. Operation category READ is not supported in state standby

    Namenode 开启HA之后,由于zookeeper异常,出现脑裂现象 执行 $./hdfs haadmin -getServiceState nn1                         ...

  4. ASP+中文显示之两种解决方法

    作者刚開始写ASP+程序时候碰到的第一个比較大的问题就是中文显示问题,执行后发现ASP+从数据库中读  取出来的中文所有变成了?????,有点相似jsp中的这个频率出现最高的中文显示问题了,查了资料发 ...

  5. Qt License 解读

    对于桌面和移动平台应用 官方说明如下 Qt for Application Development lets you create applications for desktop and mobil ...

  6. Windows技巧

    1 修改域名 像Linux的/etc/hosts一样,windows也有一个类似的hosts文件, C:/WINDOWS/system32/drivers/etc/hosts 添加如下域名与IP的映射 ...

  7. UEFI和Legacy及UEFI+Legacy启动的区别

    uefi和legacy是两种不同的引导方式,uefi是新式的BIOS,legacy是传统BIOS.你在UEFI模式下安装的系统,只能用UEFI模式引导:同理,如果你是在Legacy模式下安装的系统,也 ...

  8. Null value was assigned to a property of primitive type setter of com.oa.manager.personnel.bean.KqAttendanceHoliday.dayType

    问题: 解决方法:依据提示,把 int 修改为Integer解决. 总结: javaBean最好不要使用基本类型(记得某规范说过,具体不记得了,估计就是预防这样的问题吧)

  9. 记一次innobackupex备份恢复数据库过程

    简介:以前备份都是通过mysqldump备份数据库的,由于是逻辑备份,所以采用这种备份方式数据是很安全的,跨平台.版本都很容易.凡事有利必有弊,逻辑备份在你数据库比较大时,备份.恢复数据所耗费的时间也 ...

  10. CMS Collector and G1 Collector

    Understanding the CMS Collector CMS has three basic operations: CMS collects the young generation (s ...