css获取网页高度

CSS获取网页高度

基础概念

CSS（层叠样式表）主要用于描述HTML文档的外观和格式。获取网页高度通常是指获取浏览器窗口或整个文档的高度。

类型

浏览器窗口高度：获取当前浏览器窗口的高度。
文档高度：获取整个HTML文档的高度。

应用场景

固定导航栏：当用户滚动页面时，导航栏始终保持在顶部。
全屏背景：根据网页高度设置全屏背景图片。
动态内容加载：当用户滚动到页面底部时，自动加载更多内容。

获取网页高度的方法

在CSS中，通常使用JavaScript来获取网页高度。

获取浏览器窗口高度

window.innerHeight

获取文档高度

document.documentElement.scrollHeight

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取网页高度</title>
    <style>
        body {
            height: 2000px; /* 设置一个较大的高度以便观察效果 */
        }
        .fixed-navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="fixed-navbar">
        固定导航栏
    </div>
    <script>
        window.addEventListener('scroll', function() {
            var windowHeight = window.innerHeight;
            var documentHeight = document.documentElement.scrollHeight;
            console.log('浏览器窗口高度:', windowHeight);
            console.log('文档高度:', documentHeight);
        });
    </script>
</body>
</html>

参考链接

通过上述方法，你可以获取网页的高度，并根据需要进行相应的布局和交互设计。

页面内容是否对你有帮助？

有帮助

没帮助

如何使用css或jquery或php获取从窗口顶部到我在窗口上的点击点(标签)的高度？

、

如何使用css或jquery或php获取从“窗口顶部”到“我在窗口上的点击点”的高度？请给我解决方案或任何替代方案。提前感谢

浏览 3提问于2012-03-10得票数 1

回答已采纳

2回答

获取css高度应用后网页元素的默认高度)

、、、

如果一个元素忽略了应用于它的' height‘css属性，我该如何获取元素在页面上的高度呢？document.origContentHeight; else var newHeight = spaceForContent; $("#auto-resize").css变量document.origContentHeight将保持设置为旧的高度。有没有一种方法可以检测元素的高度(例如示例中的#a

浏览 0提问于2012-05-11得票数 1

回答已采纳

2回答

我正在建立一个网页，它应该适应所有的分辨率。我认为对于我来说，定义每个元素与页面将打开的百分比不同的分辨率元素将相对于页面大小。我不知道如何准确或正确，如果我错了，请纠正我。我在div(#thirdLine)中有一个大于图像高度的徽标图像。我想通过css将图像的高度调整为div，这是可能的吗？如果这是不可能的。我在jQuery $('#logo').css('height',$('div.thirdLine').css(

浏览 0提问于2012-04-02得票数 0

回答已采纳

2回答

将CSS设置为使用100%的监视器显示

、

我试图使用所有可用的高度在显示器中显示的网页浏览器。为此，我尝试为html标记创建CSS。html{ max-h

浏览 4提问于2014-06-09得票数 0

回答已采纳

2回答

如何让网站垂直响应？

、

我有一个网页，我有一个“身体”包裹着我所有的内容。但是当我做这个网页响应并想要正文放大网页内容时，正文停止了垂直放大内容。当我增加宽度而不是垂直方向时，它确实会放大内容。我不想要额外的黑色区域。

浏览 1提问于2018-11-07得票数 0

1回答

不使用JavaScript更改元素样式

、、、

是否有一种不使用JavaScript来更改指定元素的CSS样式的方法？我有两个DIVs (#menu和#content)，我想将#content的min-height CSS属性设置为#menu的实际height属性(所以如果#menu比#content长，那么#content's和#menu的高度就相等)。

浏览 6提问于2011-07-31得票数 0

回答已采纳

2回答

使字形网格在角度上保持100%的页面高度的方法

、、、

我试图使角度ag-grid来获取网页的全部高度，所以如果我有一些组件，比如ag-grid的文本或标题，我想要使显示的网格获取页面的全部高度。我看过关于堆栈溢出的问题：下面是我应用的css，但它没有提供所需的结果： height: 100%; flex-grow: 1;下面是一个演示的Stackblitz链接：我已经用一个div包围了网格，它使用

浏览 2提问于2018-05-14得票数 4

回答已采纳

1回答

页面转换中的毛刺

、、、

我希望你一切都好。当改变页面时，经常会出现一个小故障，它会出现一些框架，而且是相当随机的。有没有办法限制这种情况？提前谢谢你，Léo

浏览 13提问于2021-06-04得票数 0

2回答

Div不会填充百分比高度，会填充像素高度。为什么？

、

它的父级是内容div，它没有特定的高度，因为它是浏览器的高度。div非常简单，具体如下：CSS规则是： background-color: #000d12; height我认为这与父母没有明确的身高有关，但我想知道更多的技术原因，以及如何克服这一点，如果我想要一个div是一个百分比的网页的高度。

浏览 6提问于2015-03-11得票数 1

回答已采纳

1回答

在iPad的Safari上查看时出错的页脚

、、

This is where the different pages are set --> <footer></body>这是CSS

浏览 6提问于2013-09-19得票数 0

回答已采纳

1回答

TDs在Chrome中的奇异膨胀

、、

我正在开发一个基于网格的显示器，有点像这里的Windows8Metro：，但在chrome中，当它最初工作的时候，如果一个人反复地扩展和缩小窗口，所有的东西都会慢慢地、奇怪地不成比例地增长和扭曲。我不知道为什么会发生这种事。

浏览 5提问于2014-07-09得票数 0

回答已采纳

1回答

Lightbox 2.6居中调整大小图像

、、、、

我将此代码添加到lightbox.cssmax-width: 872px; max-height: 635px;}.lb-outerContainer, .lb-dataContainer

浏览 1提问于2013-07-29得票数 0

2回答

JavaScript:用于查询当前浏览器宽度的“document.body.clientWidth”正确属性？

、、

我是新来的响应式网页设计的。function() { }); 我想要做的是获取信息在哪里设置我的断点

浏览 21提问于2016-07-07得票数 0

回答已采纳

3回答

使网页适合屏幕问题

、、、

我有一个网页，其结构如下： <section id="nav"> <div id="intro"> <divid="main"> <div id="footer"> </body&g

浏览 1提问于2015-06-22得票数 2

6回答

使html和body伸展到100%的高度，如果页面滚动，伸展的高度会更大。

、

如果页面的高度不足以进行滚动，我希望将<html>和<body>标记设置为视区的整个高度，如果足够高，则设置为网页的整个高度。目前，我正在使用这个CSS： height: 100%;如果网页的高度不足以让用户滚动，这是一种享受，但是在一个很长的网页上，它只到达用户浏览器上视区的高度。

浏览 0提问于2013-01-04得票数 13

5回答

将div高度扩展到整个网页

有没有办法使用css将div的高度扩展到整个网页？.height height:100%;但这只会扩展到div中内容的高度。div应该覆盖整个网页，即使里面只有1行内容。

浏览 1提问于2011-04-15得票数 4

回答已采纳

1回答

引导3粘性页脚在底部和100%的高度容器与内容

、、

下面是我的css规则： position: relative;} /* Margin bottom by footer height如何使内容容器达到100%的高度？我想把这个灰色的背景色填充到页脚。那件事怎么可能？我已经花了8个小时才弄明白了。拜托救救我。更新注意使用container2类的div，我想让它达到高度，直到页脚。

浏览 2提问于2014-12-02得票数 1

1回答

如何使背景图像具有响应性，以便在iphones和android上正确显示

、、、

这就是我的css中的背景。图片非常适合这样，我不想在普通浏览器中更改位置或大小或任何东西。我只希望当在手机设备或平板电脑上查看时，图像可以自动调整大小。

浏览 3提问于2015-09-25得票数 1

1回答

如何在我的侧边栏中预览不同的网站？

、

我有两个网站，我想有一个预览我的另一个网站在侧边栏。我已经将放在我的侧边栏中，并使用以下代码进行重定向：但不起作用。有什么解决办法吗？

浏览 3提问于2016-04-29得票数 0

回答已采纳

2回答

如何使用CSS/HTML在不同屏幕分辨率和大小的设备上显示高度为2 2mm的文本？

、

我创建了一个简单的网页，只显示文本"Hello，World!"：</body>然后在手机上显示OK (2 2mm文字高度)。但是在桌面浏览器上，文本高度很大。我知道CSS中有不同大小的单位，比如em，pt，cm和in。我的问题是，在所有分辨率和大小不同的设备上，为了获得大约2 My的文本高度，我必须使用哪种最好和简单的CSS代码。我知道使用JavaScrip

浏览 2提问于2016-12-06得票数 0

点击加载更多