如何css设置div页面100%高度， body页面全高

最新推荐文章于 2024-08-24 00:18:19 发布

Rudon滨海渔村

最新推荐文章于 2024-08-24 00:18:19 发布

阅读量4.1k

点赞数 1

分类专栏： Web CSS

本文链接：https://blog.csdn.net/qq285744011/article/details/120813316

版权

HTML CSS 背景渐变全屏线性渐变

关键词由CSDN通过智能技术生成

CSS 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

Web

9 篇文章 0 订阅

订阅专栏

效果图

div高度=全屏高度，背景色为渐变

核心代码

html, body {
height: 100%;
}
div.anyClassName {
height: 100%;
}

单纯的div {height: 100%;}是不行的，因为div的父级body的父级html默认高度是随内容变化。

完整方法

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>百度绿色版 - baidu.rudon.cn -  无广告新体验  -  Rudon滨海渔村</title>
        <style type="text/css" media="all">
            html, body {
                height: 100%;
            }
            div.anyClassName {
                height: 100%;
            }

        </style>
    </head>
    
    <body style="background: linear-gradient(to bottom, #E4EFE0 0%, #FFFFFF 90%);">
        <div class="anyClassName">
               Hello World!
        </div>
        
        
        
        
        <div style="position: fixed; z-index: 100100; bottom: 10px; left: 0; text-align: center; width: 99%;">
            <a href="https://beian.miit.gov.cn">
                粤ICP备2021XXXX号
            </a>
        </div>
    </body>
</html>