前言

相信在平时写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. GMM算法的matlab程序

    GMM算法的matlab程序 在“GMM算法的matlab程序(初步)”这篇文章中已经用matlab程序对iris数据库进行简单的实现,下面的程序最终的目的是求准确度. 作者:凯鲁嘎吉 - 博客园 h ...

  2. Java实现Sunday百万级数据量的字符串快速匹配算法

    背景       在平时的项目中,几乎都会用到比较两个字符串时候相等的问题,通常是用==或者equals()进行,这是在数据相对比较少的情况下是没问题的,当数据库中的数据达到几十万甚至是上百万千万的数 ...

  3. Vector与ArrayList区别

    1)Vector的方法都是同步的(Synchronized),是线程安全的: ArrayList的方法是线程不安全的. 由于线程同步必然会影响性能,因此,ArrayList的性能比Vector好. 请 ...

  4. 在 Xshell 中 使用 hbase shell 进入后 无法删除

    在 Xshell 中 使用 hbase shell 进入后 无法删除 问题: 在hbase shell下,误输入的指令不能使用backspace和delete删除,使用过的人都知道,这是有多坑,有多苦 ...

  5. EL概述和EL11个隐含对象

    jsp有内置对象,当然EL也有隐含对象,EL的隐含对象类似于JSP内置对象.隐含对象分为三类,下面对11个隐含对象进行概述: 1.页面上下文对象(pageContext)1个 pageContext对 ...

  6. session和application内置对象

    一.Session内置对象 分析得知request内置对象中的属性只是在当次请求中有效,经过客户端跳转之后就无效,因为客户端跳转属于第二个请求,也就是说request只代表当次请求的对象,如果要让客户 ...

  7. InheritedWidget

    下面这个示例是InheritedWidgt的一个简单用法: class CounterProvider extends InheritedWidget{//数据之前必须加上final,下面这三个数据都 ...

  8. 【原创】分布式事务之TCC事务模型

    引言 在上篇文章<老生常谈--利用消息队列处理分布式事务>一文中留了一个坑,今天来填坑.如下图所示 如果服务A和服务B之间是同步调用,比如服务C需要按流程调服务A和服务B,服务A和服务B要 ...

  9. 树的平衡之AVL树——错过文末你会后悔，信我

    学习数据结构应该是一个循序渐进的过程: 当我们学习数组时,我们要体会数组的优点:仅仅通过下标就可以访问我们要找的元素(便于查找). 此时,我们思考:假如我要在第一个元素前插入一个新元素?采用数组需要挪 ...

  10. Spring 使用纯注解方式完成IoC

    目录 创建一个简单的Person类 使用xml方式配置Spring容器并获取bean的过程 创建xml配置文件 进行测试 使用纯注解方式配置Spring容器并获取bean的过程 创建spring配置类 ...