`
haitao360312
  • 浏览: 2457 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

div自适应窗口高度

阅读更多

<script type="text/javascript">
window.onload = windowHeight;//页面载入完毕执行函数
function windowHeight() {
var h = document.documentElement.clientHeight;//获取当前窗口可视操作区域高度
var bodyHeight = document.getElementById("content");//寻找ID为content的对象(也就是你想要自适应高度的对象)
if (h < 598){//因为前边是获取的当前窗口的可视操作区域的高度 所以当调小窗口的时候 会造成不美观


h = 598 ;
 bodyHeight.style.height = (h-289) + "px";// +“px” 是解决 firefox不识别 bodyHeight.style.height =h。289数字可以根据需要更改!
}
else bodyHeight.style.height = (h-289) + "px";

}
setInterval(windowHeight,500)//每半秒执行一次windowHeight函数

</script>

1
0
分享到:
评论

相关推荐

    css+div自适应窗口宽度

    总的来说,CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的布局和JavaScript辅助,可以创建出适应不同屏幕尺寸的响应式网页,确保在各种设备上提供良好的用户体验...

    使用JS+CSS实现DIV层自适应高度和宽度

    我们了解了CSS基础知识、JavaScript基础知识、获取浏览器窗口的高度、实现DIV层自适应高度、实现DIV层自适应宽度和监听窗口resize事件等知识点。这些知识点将帮助我们更好地实现网页的自适应设计。

    JS控制DIV自适应高度

    本篇文章将深入探讨如何利用JavaScript(JS)和CSS结合来解决div自适应高度的问题。 首先,我们需要理解CSS在布局中的作用。CSS(层叠样式表)用于定义网页元素的样式,包括尺寸、颜色、位置等。对于div自适应高度...

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等)

    本篇文章将深入探讨`div`的一些进阶效果,包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先,让我们关注圆角`div`。CSS3引入了`border-radius`属性,使得我们...

    关于div自适应高度/左右高度自适应一致的js代码

    通过上述两种方法的结合使用,我们就可以解决在网页布局中常见的左右两侧DIV自适应高度以及DIV高度自适应屏幕的布局问题。这不仅有助于保持页面布局的整洁和一致性,而且能够提升网页在不同设备和屏幕尺寸上的适应性...

    怎样让一个div高度自适应浏览器高度

    在网页设计中,让一个`div`元素的高度自适应浏览器高度是一个常见的需求,尤其是在创建全屏背景、响应式布局或者动态内容填充时。这个需求看似简单,但有时却容易让人困惑,因为仅设置`div`的高度为`100%`并不总是...

    JS实现DIV高度自适应窗口示例

    标题中提到的是“JS实现DIV高度自适应窗口示例”,这表示我们要探讨如何利用JavaScript(简称JS)编写代码,使得网页中的一个特定的 DIV(即文档对象模型中的一个容器元素)能够根据浏览器窗口大小的变化而动态调整...

    div宽度自适应布局(左边自适应)

    在左边自适应布局中,通常左侧`div`用于展示主要内容或导航,它的宽度会随着浏览器窗口的缩放而变化,以保证内容始终可见。右侧`div`则可以用于侧边栏,展示辅助信息,如广告、链接列表等,其宽度通常设定为固定值...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    div宽度自适应布局(右边自适应)

    9. **百分比与视口单位**: 除了百分比,还可以使用视口相关的单位如`vw`(视口宽度的百分比)和`vh`(视口高度的百分比),使`div`宽度与浏览器视口大小关联,实现更灵活的自适应效果。 10. **浏览器兼容性**: 在实际...

    jQuery自适应窗口大小图片排列代码.zip

    【jQuery自适应窗口大小图片排列代码】是一种网页开发技术,旨在解决在不同设备和屏幕尺寸下,图片排列不整齐或显示不全的问题。这个技术利用了JavaScript库jQuery的强大功能,结合了名为`jquery.row-grid.js`的插件...

    自适应窗口大小背景.zip

    本案例的"自适应窗口大小背景.zip"文件提供了一种实现这一目标的方法,主要涉及JavaScript(JS)和CSS的技术应用。我们将深入探讨如何通过JavaScript和CSS实现这种自适应背景效果,并结合"jiaoben18468"这个文件中的...

    网页内自适应高度框架JS

    “自适应高度”是指网页元素(如div、iframe或任何其他容器)能够根据其内容或周围环境动态调整自身高度,确保内容不会被截断或溢出。在传统的网页设计中,这可能需要复杂的CSS和JavaScript来实现。而这个自适应高度...

    button自适应高度和自动换行

    3. JavaScript动态计算:如果需要更复杂的行为,例如根据窗口大小动态调整按钮高度,可以使用JavaScript监听窗口的`resize`事件,并计算按钮内容的高度来设置按钮样式。 二、自动换行 1. 白色空间处理:在HTML中,...

    iframe自适应高度(兼容多种浏览器)

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中,`iframe`是一种常用的元素,用于在当前页面中嵌入另一个HTML文档。然而,默认情况下,`iframe`的高度是固定的,这可能会导致内容显示不完全或者出现不必要...

    脚本控制DIV三行三列布局自适应高度.rar

    本资源"脚本控制DIV三行三列布局自适应高度.rar"提供了一种解决方案,利用JavaScript(JS)来实现一个三行三列的布局,并且每个单元格(DIV)的高度能够自适应内容。这种布局方式尤其适用于响应式网页设计,确保在...

    js实现背景图自适应窗口大小

    本文将深入探讨使用JavaScript实现背景图自适应窗口大小的具体技术实现,同时会通过分析实例代码来提供一种解决方案。 ### 知识点一:HTML结构设置 在文章中,首先需要定义一个具有背景图的HTML元素。通常,我们会...

    JQ控制两DIV高度自动相等

    "JQ控制两DIV高度自动相等"这个话题就是关于如何使用JavaScript库jQuery来实现这一功能。这里我们将深入探讨如何实现这个效果,以及涉及到的相关知识点。 首先,我们有两个主要的HTML元素,即两个`div`,它们的初始...

    自适度div高度

    自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例

Global site tag (gtag.js) - Google Analytics