开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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>

参考链接

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

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

有帮助

没帮助

相关·内容

如何用JavaScript获取网页文档高度？

为了实现这些功能，准确获取整个网页文档的高度是关键的一步。今天，我们就结合一个实际业务场景，来看一下如何用JavaScript获取整个文档的高度。...为了实现这个功能，我们需要精确地获取当前网页的高度，并判断用户是否已经滚动到页面底部。...方法一：获取文档高度的方法要获取文档的高度，可以使用scrollHeight、offsetHeight和clientHeight这些属性的最大值。...示例代码在这个场景中，我们可以这样编写代码： // 获取文档的高度 function getDocumentHeight() { const body = document.body; const...示例代码在我们这个加载更多商品的场景中，也可以使用这种方法来获取文档高度： // 获取文档的高度 function getDocumentHeight() { const body = document.body

1340 0

js获取网页屏幕可视区域高度

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth...==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度看了以上代码，可能会有疑问说body和可见区域到底有什么不同呢，我们在console...里运行一下会发现在不同的网页中有不同的情况值，有的document.body.clientWidth和document.documentElement.clientWidth 的值相同，有的却不同，原因在哪呢...以下是兼容主流浏览器（IE/Firefox/Chrome/Safari）获取浏览器窗口可视区域（不包括滚动条）和滚动条位置的代码： ? ?...|| document.body.clientWidth; 4 } 5 6 // 获取浏览器窗口的可视区域的高度 7 function getViewPortHeight() { 8

9.5K1 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

8.1K3 0

CSS解决高度坍塌

什么是高度坍塌默认情况下当父元素不设置高度的时候父元素的高度是靠子元素撑大的，也就是说子元素有多高，父元素就有多高；但是当子元素加了浮动之后，子元素就脱离了文档流，这时候父元素就会发生高度坍塌现象。...先看没有高度坍塌的时候的样式：代码：解决高度坍塌...=edge" /> 解决高度坍塌...=edge" /> 解决高度坍塌

1.6K2 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 ...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度... offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...- border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS...window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

16.2K1 0

JavaScript获取高度和宽度

屏幕分辨率为：screen.width screen.height 屏幕可用大小：screen.availWidth screen.availHeight 网页可见区域宽：document.body.clientWidth...网页可见区域高：document.body.clientHeight 网页可见区域宽(包括边线的宽)：document.body.offsetWidth 网页可见区域高(包括边线的宽)：document.body.offsetHeight...网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop...网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height...屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth

3.7K6 0

Javascript 获取div真实高度

如果你要获取的样式没有相对应的（就像#div1.style.width对应#div1.offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。...原文：http://www.cnblogs.com/zhwl/p/3858682.html 实际测试过程中，发现上面获取真实高度是有问题，其实无论是设置在样式表还是在行内设置，都会获取到你设置的值，如果要获取真实高度...：获取真实高度...： alert(parseInt($('.article__content div').get(0).offsetHeight)); 获取时只要在这个样式里面的div大小，这个就是真实高度。...这里还附带其它的获取高度方法 alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度

5.1K3 0

js获取各种高度总结

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度： document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...： document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度（加边线）： document.body.offsetHeight document.body.offsetWidth

12.6K2 0

根据获取内部元素的高度，设置iframe的高度

iframe 是一个非常迷得一个元素，很难直接获取其内部元素的高度。...下面分享一个方法，可以获取 iframe 内部元素的高度： function setIframeHeight(id){ try{ var iframe = document.getElementById

9.3K2 0

高度100%（网页全屏）解决方案

高度100%（网页全屏）解决方案 <!

99015 0

ClientHeight_offsetheight获取高度不对

clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。...style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） offsetHeight...//返回元素的高度（包括元素高度、内边距和边框，不包括外边距） scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight...相同 scrollTop //此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。...offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。

3.1K2 0

CSS 网页动画

前言CSS是一种用于网页设计和排版的语言，也可以用它来制作网页动画。下面是一些制作网页动画的CSS技巧：一、使用CSS3动画CSS3引入了动画属性，允许您为元素设置动画效果。...例如，要制作一个淡入淡出的效果，您可以使用以下CSS代码：.fade-in-out { animation: fade-in-out 2s ease-in-out infinite;}@keyframes...例如，要制作一个当鼠标悬停在按钮上时变色的效果，您可以使用以下CSS代码：.button { background-color: blue; transition: background-color...0.3s ease-in-out;}.button:hover { background-color: red;}三、使用CSS变换：变换是一种可以通过平移、旋转、缩放等方式改变元素外观的CSS属性...例如，要制作一个旋转的效果，您可以使用以下CSS代码：.rotate { transform: rotate(360deg); transition: transform 1s ease-in-out

7733 0

css高度坍塌与清除浮动

高度坍塌的原因在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高....但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷.由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱.

1.9K5 0

CSS元素高度始终跟随宽度

要让一个 CSS 元素的高度始终跟随其宽度，你可以使用 padding-bottom 或 aspect-ratio 属性，具体取决于你对浏览器支持的要求。以下是两种常见的方法：1....element { width: 100%; aspect-ratio: 1; /* 高度始终等于宽度 */}aspect-ratio: 1 表示宽度和高度相等，也就是一个正方形。...百分比值是相对于父元素的宽度的，因此这个方法能保证元素的高度跟随宽度变化。..../}padding-bottom: 100% 会使元素的高度等于其宽度，形成一个正方形。...综合示例假设你有一个容器，需要它的高度始终跟随宽度：<!

740 0

前端学习笔记之CSS网页布局 CSS网页布局

CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1、什么是网页布局方式布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word...，nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2、网页布局/排版的三种方式 2.1、标准流 2.2、浮动流 2.3、定位流二标准流标准流的排版方式.../html> 2.1 绝对定位的注意点 #1、绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素 #2、如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点..., 而不是以整个网页的宽度和高度作为参考点，会相对于body定位会随着页面的滚动而滚动 #3、一个绝对定位的元素会忽略祖先元素的padding 网页头部通栏(穿透效果) ?

4.8K2 0

android获取状态栏高度

解决方案：为了达到良好的兼容性，我们可以如下变现代码 /** * 用于获取状态栏的高度。 * * @return 返回状态栏高度的像素值。...statusBarHeight = frame.top; } return statusBarHeight; } 还可以使用Resource对象获取

4.6K6 0

jq获取文档和窗口高度

jquery获取窗口高度和窗口高度，$(document).height()、$(window).height() 1.$(document).height()：整个网页的文档高度 2....$(window).height()：浏览器可视窗口的高度 3.$(window).scrollTop()：浏览器可视窗口顶端距离网页顶端的高度（垂直偏移） 4....$(document.body).height();//浏览器当前窗口文档body的高度 5....$(document.body).outerHeight(true);//浏览器当前窗口文档body的总高度包括border padding margin 6....$(document.body).width();//浏览器当前窗口文档body的高度 9.

2K1 0

html5 scrollheight,scrollHeight和scrollWidth，获取网页内容高度和宽度不正确

问题如下图所示，高度明显不正确，请问问题出在哪，希望能给出详细解释。...document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight; document.write(“网页的实际宽度...:”+w+”px”+” “); document.write(“网页的实际高度:”+h+”px”+” “); 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/163746

1.4K3 0

CSS媒体查询_css网页

前言媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。...媒体查询的使用方法第一种：使用 link 标签引入外部样式表（推荐使用） css...Type，那么其默认为all，如： css..." /> 在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示 css" href="style.css..." media="print and (max-width:480px), screen and (min-width:960px)" /> 上面代码中style.css样式被用在宽度小于或等于480px

1.6K3 0

JavaScript 获取屏幕的高度和宽度

screen.width:显示浏览器的屏幕的宽度 screen.Height:显示浏览器的屏幕的高度 screen.availWidth：显示浏览器的屏幕的可用宽度 screen.availHeight...:显示浏览器的屏幕的可用高度（这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。）...document.body.offsetWidth：网页可见区域宽(包括边线的宽) document.body.offsetHeight:网页可见区域高（包括边线的高） ?...document.body.clientWidth：网页可见区域宽 document.body.clientHeight：网页可见区域高 document.body.scrollWidth：网页正文全文宽...document.body.scrollHeight：网页正文全文高 document.body.scrollTop：网页被卷去的高 document.body.scrollLeft：网页被卷去的左

7.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭