前言

相信在平时写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. 删除网络中的本地连接*x等

    1.运行-regedit 打开注册表 定位到 HKEY_LOCAL_MACHINE SYSTEM CurrentControlSet Control Network {4D36E972-E325-11 ...

  2. 基本数据对象（int,float,str）

    一.整型(int) # int对象初始化 x = 2 y = int(3) n = int("A3",12) # 运算符(+.-.*././/.%.**) ''' 相关的函数 '' ...

  3. python之并发编程

    一 背景知识 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的一个抽象. 进程的概念起源于操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一.操作系统的其他所 ...

  4. Atcoder Dwango Programming Contest V

    模拟,做了ABC三题. D难一些,就不会了. 中规中矩的吧... Atcoder DPCV B 题意:给一个序列,求出所有的子串和中AND值最大的k个数的AND. 思路:既然要求AND,那么肯定按位考 ...

  5. Vue-异步组件

    一般情况下,在代码开头引入组件: import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/hom ...

  6. 微软是如何重写C#编译器并使它开源的

    译者:王亮作者:Mads Torgersen (C# Language PM at Microsoft)原文:http://t.cn/EPOG96O 译者的一些话: 看了大家的评论,有园友说我翻译的不 ...

  7. Java 向MySql 插入日期和时间正确的姿势

    Mysql和Java之间时间对应关系表: date              java.sql.Date Datetime        java.sql.Timestamp Timestamp    ...

  8. 【问题解决方案】ImportError: No module named 'openpyxl'/‘xlrd’

    背景: 在jupyter notebook to_excle: 运行将dataframe保存为excel文件 df.to_excel('dataframe.xlsx') 时报错openpyxl rea ...

  9. Flask上下文管理源码分析 ——（3）

    引出的问题 Flask如何使用上下文临时把某些对象变为全局可访问 首先我们做如下的几种情况的假设 情况一:单进程单线程 这种情况可以基于全局变量存储临时的对象 情况二:单进程多线程 这种情况会出现多个 ...

  10. Linux(Ubuntu)使用日记------自定义命令的使用

    Linux如何自定义自己的命令呢?修改 系统中的 ~/.bashrc 文件即可 在这个文件最后面使用alias命令重定义命令. 例如: # novel-git begin alias n.r='les ...