前言

相信在平时写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. Docker: 企业级镜像仓库Harbor部署（http）

    Harbor离线安装包下载地址:https://github.com/goharbor/harbor Docker compose(安装harbor需要用到docker compose)下载地址:ht ...

  2. HTML，CSS---问题记录

    1,,登录框input和标签垂直方向对不齐,咋解决? 给input框外套一层span标签,给span标签设置宽高,让它和左边或右边的标签对齐. 不要直接给input设置宽高,这样是对不齐的 2,套没有 ...

  3. 【Python 11】汇率兑换4.0（函数）

    1.案例描述 设计一个汇率换算程序,其功能是将美元换算成人民币,或者相反. 2.0增加功能:根据输入判断是人民币还是美元,进行相应的转换计算 3.0增加功能:程序可以一直运行,知道用户选择退出 4.0 ...

  4. Taro项目遇到的问题

    1. https://taro-ui.aotu.io/#/docs/questions 请在Taro项目根目录找到 config/index.js 文件中的h5项,添加如下: h5: { ... es ...

  5. python接口自动化-get请求

    一.环境安装 1.用pip安装requests模块 >>pip install requests 二.get请求 1.  url 1.1:   response 的返回内容还有很多信息,例 ...

  6. <转>性能测试指标

    下午在家看书,清理收藏栏的内容,翻出来几篇去年收藏的博文,此时再看,真切的感觉到了自己这一年的成长,分享出来,希望看到的童鞋都能有所得,就好... 原文地址:性能测试指标 一.通用指标 指Web应用服 ...

  7. 《通过C#学Proto.Actor模型》之Spawning

    Props是配置Actor和实例化Actor,那实例化后,就应该访问了,Props.Actor提供了Actor.Spawn(),Actor.SpawnPrefix(),Actor.SpawnNamed ...

  8. Gdi绘图

    在使用VC开发项目过程中,界面是项目中的一个子模块.虽然界面并不那么重要,把握住核心功能就可以了,但界面美观与否直接关系到用户的体验, 因此我们也应该关注界面的处理. 我们可以在OnEraseBkgn ...

  9. Redis详解（四）------ redis的底层数据结构

    上一篇博客我们介绍了 redis的五大数据类型详细用法,但是在 Redis 中,这几种数据类型底层是由什么数据结构构造的呢?本篇博客我们就来详细介绍Redis中五大数据类型的底层实现. 1.演示数据类 ...

  10. Mybatis逆向工程 —— ResultMaps collection already contains value for ***

    报错提示: Result Maps collection already contains value for ***. 遭遇场景: maven+ssm 项目中,采用了mybatis的逆向工程生成 p ...