`
lengchaotian
  • 浏览: 281106 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

div超出屏幕高度后自动出现滚动条

 
阅读更多

<script language="javascript" type="text/javascript">
     $(document).ready(function()
	{
		// 浏览器的高度和div的高度
		var height = $(window).height(); 
		var divHeight = $("#scolldiv").height();
		
		//获取div对象
		var divh = $("#scolldiv").get(0);
		
		//div高度大于屏幕高度把屏幕高度赋给div,并出现滚动条
		if (divHeight > height-20)
		{
			divh.style.height = height-20;
			divh.style.overflow = "auto";
		}
	});
 </script>
<div id="scolldiv" style="width: 100%;"><br /></div>
 
分享到:
评论

相关推荐

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    这样做的好处是无论滚动条出现与否,页面的宽度始终保持一致,不会受到滚动条宽度的影响。实现此方法的代码示例为:$("body").css("width",$(window).width());。这段代码使用jQuery将body元素的宽度设置为窗口对象$...

    js固定DIV高度,超出部分自动添加滚动条的简单方法

    通过以上步骤,我们成功地创建了一个固定高度的`&lt;div&gt;`,并且当内容超出这个高度时,滚动条会自动出现。这种方法适用于那些需要限制显示区域但又不希望丢失任何内容的场景,例如,基本信息展示、评论区或者数据列表...

    拖动div 内部有滚动条

    1. **CSS样式设定**:首先,为 `div` 设置合适的宽度、高度和溢出隐藏(`overflow: auto` 或 `overflow-y: scroll`),以便在内容过多时自动出现滚动条。同时,可能需要设置边框、内边距和外边距以美化布局。 2. **...

    限制div高度当内容多了溢出时显示滚动条

    在内容过多导致div内部滚动条出现后,这个属性限制了div的高度不会超过这个值。 接着,我们来分析一下给定的示例代码: ```html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "***"&gt; ***"&gt; ;...

    css实现div自动添加滚动条(图片或文字等超出时显示)

    原来用过,没有太在意,最近又用到。... 参数: 1.visible :不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 2.auto :此为b

    JS控制DIV自适应高度

    `,当内容超出div的原始尺寸时,会自动出现滚动条。然而,这种方法不适用于所有情况,特别是当需要精确控制div高度时。 2. **JS监听内容变化**:可以使用JavaScript的事件监听器,如`MutationObserver`,来检测div...

    jQuery滚动条滚动显示手机菜单

    "jQuery滚动条滚动显示手机菜单"这个主题关注的是如何利用jQuery库来实现这样的功能,即当用户滚动页面时,菜单会在适宜的时候自动出现。jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作...

    横向滚动条

    - **应用场景**:在网页设计中,当内容长度超过屏幕宽度时,使用横向滚动条可以让用户平滑地浏览到所有的内容。 #### 二、描述:代码实现信息横向滚动,可根据情况设置滚动速度以及高度 - **核心知识点**: - **...

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

    /* 防止滚动条出现,若需要滚动条则移除此行 */ } ``` 这段代码将`html`和`body`元素的高度设置为浏览器窗口的高度,并清除了默认的边距和内边距,防止它们影响元素的大小。`overflow: hidden`是为了避免出现滚动...

    jquery Sly滚动条插件制作横向滚动条和垂直滚动条

    jQuery Sly滚动条插件是一款强大的JavaScript库,专为创建具有高度自定义功能的横向和垂直滚动条而设计。它提供了一种优雅的方式来管理和显示大量内容,尤其在网页设计中,当内容超过屏幕区域时,滚动条是必不可少的...

    自定义滚动条

    在网页设计中,滚动条是不可或缺的元素,它允许用户浏览超出屏幕范围的内容。然而,浏览器默认的滚动条样式往往比较单一,与现代网页的美观和个性化需求有所差距。"自定义滚动条"就是一种解决方案,它允许开发者通过...

    jquery jscrollpane.js滚动窗口微信聊天对话框

    这个容器通常是一个div元素,使用CSS设置其高度,以便在内容超出时显示滚动条。 然后,我们可以使用以下代码初始化jscrollpane: ```javascript $(document).ready(function () { $('.chat-dialog').jScrollPane...

    div不能自适应高度不能随图片的高度变化

    如果图片的高度始终没有超出&lt;div&gt;的高度,那么即使设置了overflow:auto,&lt;div&gt;也不会有滚动条,也就无法显示其自适应高度的效果。 2. 使用CSS的Flexbox布局: Flexbox布局是一种更为先进和灵活的布局方式,它能更...

    显示图片滚动条一例

    滚动条是用户界面的一个重要组成部分,它允许用户查看超出屏幕范围的内容。在这个示例中,我们将探讨如何在显示图片时添加水平和垂直滚动条,以便用户可以平滑地浏览大尺寸图片或众多小图片。 首先,我们需要理解在...

    IE, firefox竖向横向滚动条处理

    在网页设计中,滚动条是不可或缺的元素,它允许用户查看超出屏幕范围的内容。滚动条分为竖向(垂直)和横向(水平)两种,通常在浏览器窗口内容超过其可视区域时自动显示。本文将深入探讨如何处理IE和Firefox浏览器...

    手机弹窗 禁止body滚动

    默认情况下,如果页面内容超过屏幕高度,`body`会自动产生滚动条,允许用户滚动查看全部内容。 要禁止body滚动,我们可以采用以下几种方法: 1. CSS样式控制: 通过CSS的`overflow`属性,我们可以禁止body的滚动...

    elementUI+vue2 table滚动封装

    若不设置具体高度,但数据宽度或高度超过容器,也会自动出现滚动条。 **二、Vue2中的数据绑定和响应式** Vue2的核心特性之一就是数据绑定和响应式系统。在创建表格时,我们通常会有一个数据数组来存储表格的行数据...

    简单的竖直滚动广告demo

    为了实现自动滚动效果,我们需要用JavaScript来改变广告项的位置。可以使用定时器(如`setInterval`)每隔一定时间更新每个广告项的`translateY`值,使其依次进入视口。当最后一个广告项滚动到顶部时,将其位置重置...

    jScrollPane

    在网页中,滚动条通常出现在具有溢出内容的元素(如div或textarea)上。原生的HTML滚动条样式受限,无法满足设计师对网页视觉效果的高要求。 ### jScrollPane的核心特性 1. **高度自定义**:jScrollPane 允许开发者...

    自适应宽度高度的tab标签文字切换效果

    而自适应高度则表示每个标签页的内容区域会根据内容的多少动态调整高度,避免出现滚动条,保持页面整洁。这种特性在响应式设计中尤为重要,因为它允许页面在不同屏幕尺寸下都能良好展示。 实现这种效果通常会用到...

Global site tag (gtag.js) - Google Analytics