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

最新推荐文章于 2024-05-30 22:05:48 发布

baoao1875

最新推荐文章于 2024-05-30 22:05:48 发布

阅读量1k

点赞数

原文链接：http://www.cnblogs.com/shiyou00/p/10755639.html

版权

前言

相信在平时写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;

最低0.47元/天解锁文章

baoao1875

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS难点为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案...

前言相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用。今天我们就来一探究竟原因：父元素未设置具体高度，子元素设置height:100%是无效的。现象以及方案[1] 设置高度为100%时，无法实现全屏<!DOCTYPE html><html lang="en"><head> <meta ...
复制链接

扫一扫