前言

相信在平时写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. 比较两个slice、struct或者map是否相等

    我们可以直接使用reflect.DeepEqual来比较两个slice.struct或者map是否相等 package main import ( "fmt" "refl ...

  2. 腾讯大数据平台Oceanus: A one-stop platform for real time stream processing powered by Apache Flink

    January 25, 2019Use Cases, Apache Flink The Big Data Team at Tencent     In recent years, the increa ...

  3. Java 8 新特性7-方法引用、继承

    (原) 方法引用: 方法引用有4种: 1.静态方法引用:类名::静态方法名 在java中,对集合的排序,我们常用java提供的 Collections.sort(List<T> list, ...

  4. printf 函数原型

    typedef char *va_list; #define _AUPBND (sizeof (acpi_native_int) - 1) #define _ADNBND (sizeof (acpi_ ...

  5. SpringCloud（4）熔断器 Hystrix

    在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...

  6. codeforces#1132 F. Clear the String（神奇的区间dp）

    题意:给出一个字符串S,|S|<=500.每次操作可以删除一段连续的相同字母的子串.问,最少操作多少次可以把这个字符串变成空串. 分析:刚开始的思路是,把连续的串给删除掉,然后再....贪心.完 ...

  7. codeforces#439 D. Devu and his Brother （二分）

    题意:给出a数组和b数组,他们的长度最大1e5,元素范围是1到1e9,问你让a数组最小的数比b数组最大的数要大需要的最少改变次数是多少.每次改变可以让一个数加一或减一 分析:枚举a数组和b数组的所有的 ...

  8. Photoshop调出外景婚片蓝色小清新艺术效果

    春季婚纱旺季来了,好多童鞋给我抱怨说客片太难转色了,春天的小清新感都转不了,其实并不难,运用好互补色来进行加减色,能很快调整好照片的偏色,互补色也可称为对比色,后期调色的加也可称为减,如加蓝=减黄.加 ...

  9. 软件工程(GZSD2015) 第三次作业

    时间: 2015/4/17-2015/4/23 基本要求: 在之前编写的四则运算程序基础之上做如下改进: 请参照教材Page57:4.2-4.3节中内容,修改原程序,使之符合 "代码风格和设 ...

  10. Data Governance

    https://erwin.com/blog/data-preparation-mapping/