高度100%-固定值的问题

最新推荐文章于 2023-12-14 15:29:58 发布

xiaonibaba

最新推荐文章于 2023-12-14 15:29:58 发布

阅读量515

点赞数

分类专栏： html/css javascript

本文链接：https://blog.csdn.net/a22698488/article/details/105578571

版权

html/css 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

  html,body {
            height: 100%;
            padding: 0;
            margin: 0;
           /* height:100vh 或者这样*/
        }

vh的意思是把浏览器视口横向分为100份，100vh就是100%高度。

如果上方有个导航条，可以减去导航条高度,如：

height:calc(100vh - 60px)
height:calc(100% - 20px);

如果浏览器版本低,使用jQuery

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

我recalc绑定到它的窗口大小，浏览器，无论是工具窗口(如果容器的大小和窗口大小的变化)

$(window).resize(function() { setSizes(); });

古老浏览器的写法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>高度自适应布局</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            color: #F00;
        }
        .top {
            background: #36C;
            height: 100px;
        }
        .main {
            background: #F90;
            position: absolute;
            width: 100%;
            top: 100px;
            bottom: 0;
            overflow: auto;
        }
		/*for ie6*/
        * html {
            padding-top: 100px;
        }

        * html .top {
            background: #36C;
            height: 100px;
            position: absolute;
            top: 0;
            width: 100%;
        }

        * html .main {
            background: #F90;
            position: static;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="top">我是top，固定高度</div>
    <div class="main">我是main，高度随浏览器大小变化而变化<p style="height:500px;"></p>
    </div>
</body>

</html>

xiaonibaba

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高度100%-固定值的问题

html,body { height: 100%; padding: 0; margin: 0; /* height:100vh 或者这样*/ }vh的意思是把浏览器视口横向分为100份，100vh就是100%高度。如果上方有个导航条，可以减去导航条高度,如：height:c...
复制链接

扫一扫

专栏目录