-
css设置div的高度自适应并到一定高度后显示滚动条3
css设置div的默认高度为50px,当div里面的内容很多时，div自适应增加高度，当高度达到200px时高度不再增加，而是让这个div显示滚动条。
请问谁能告诉我怎么实现，谢谢!
问题补充：redstarofsleep 写道设置滚动条自动(即内容多时自动显示)
然后,嘿嘿
两条CSS3搞定
min-height:50px;
max-height:200px;
再或者.......用JS来做也不烦的..
谢谢你的帮忙，用min-height:50px;
max-height:200px;的时候在IE6下面就不好使了。我再想想用js实现。
非常感谢你!!
2011年4月22日 17:19
添加评论
关注(0)2个答案 按时间排序 按投票排序
-
采纳的答案
JS做的话,CSS不要设定高度,让它自适应.
然后JS取这个DIV的高度,如果高度<50,则将高度设为50
如果高度>200,则将高度设为2002011年4月22日 18:51
-
设置滚动条自动(即内容多时自动显示)
然后,嘿嘿
两条CSS3搞定
min-height:50px;
max-height:200px;
再或者.......用JS来做也不烦的..2011年4月22日 18:16
相关推荐
为了使`textarea`的高度自适应内容，我们可以直接设置高度为100%，但这种方法并不适用于所有浏览器，因为不同的浏览器可能会有不同的解析方式。一个更通用的解决方案是使用JavaScript来动态调整`textarea`的高度，使...
本篇文章将深入探讨如何利用JavaScript（JS）和CSS结合来解决div自适应高度的问题。 首先，我们需要理解CSS在布局中的作用。CSS（层叠样式表）用于定义网页元素的样式，包括尺寸、颜色、位置等。对于div自适应高度...
`overflow: hidden`是为了避免出现滚动条，如果你希望页面在内容超出时显示滚动条，可以将其改为`auto`。 接下来，对于需要自适应高度的`div`，我们可以这样设置： ```css .container { height: 100%; width: ...
2. **自适应需求**：随着内容的变化自动调整`<iframe>`的高度，避免出现不必要的滚动条或内容被隐藏的情况。 #### 二、实现方法 ##### 1. JavaScript动态调整高度 通过JavaScript监听`<iframe>`加载完成事件(`...
这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义组件来实现这样一个功能，以及解决在IE环境下可能出现的问题。 首先，创建一个Vue组件`AutoHeightTextarea.vue`，该组件的核心...
这个JavaScript属性返回元素的可见高度，包括内边距，但不包括滚动条和边框。对于DOM元素，例如获取页面可视区域的高度，我们可以使用`window.innerHeight`或`document.documentElement.clientHeight`。这对于动态...
**场景需求**：有时需要设置元素具有固定的大小，并希望当内容超出固定尺寸时能够隐藏或显示滚动条。 **实现方法**： 1. **设置固定高度**：直接使用 `height` 属性设置元素的高度。 2. **禁止内容溢出**：使用 `...
如果图片的高度始终没有超出<div>的高度，那么即使设置了overflow:auto，<div>也不会有滚动条，也就无法显示其自适应高度的效果。 2. 使用CSS的Flexbox布局： Flexbox布局是一种更为先进和灵活的布局方式，它能更...
5. **高度自适应**：高度自适应意味着无论内容有多少，滚动容器都会自动调整其高度以完全显示内容，防止出现滚动条。这可以通过监听内容变化并应用`height()`方法来实现。 6. **兼容性**：项目提到兼容IE、FF、...
具体到CSS样式的设置，我们可以在div元素上设置类名（例如test_box），并定义宽度、最小高度、最大高度、边框、内边距、隐藏水平滚动条、显示垂直滚动条等相关样式。通过这些样式，div元素就能够达到模拟textarea的...
而自适应高度则表示每个标签页的内容区域会根据内容的多少动态调整高度，避免出现滚动条，保持页面整洁。这种特性在响应式设计中尤为重要，因为它允许页面在不同屏幕尺寸下都能良好展示。 实现这种效果通常会用到...
4. **交互效果**：CSS可以添加过渡、动画和伪类，增强用户与网站的互动体验，如按钮悬停效果、滚动条样式等。 5. **性能优化**：通过合理地组织CSS代码，减少HTTP请求，以及利用CSS Sprites和Font Icons等技术，...
当内容超过 `div` 的设定高度或宽度时，我们可以通过设置 `overflow` 属性来控制是否显示滚动条，以及滚动条的行为。下面将详细介绍如何在 `div` 中实现滚动条及其相关设置。 首先，要让 `div` 显示滚动条，我们...
在Web标准中，IE无法通过CSS直接设置滚动条颜色。可以使用特定于IE的滤镜来实现，或者在HTML5环境中，使用新的CSS伪元素如`::webkit-scrollbar`来定制滚动条样式。 5. **1px高度容器问题**： IE6中，由于默认的...
然而，Iframe的高度自适应往往是一个棘手的问题，因为如果内容动态加载或者不同长度，Iframe默认的高度可能无法适配，导致滚动条出现或者内容被截断。本文将深入探讨如何解决Iframe自适应高度的问题。 首先，我们...
本文将详细介绍如何使用CSS实现“左侧固定宽，右侧自适应”的布局，并确保兼容所有浏览器。这种布局常见于各种网站，比如博客、新闻网站或者含有侧边栏的页面。 首先，我们要明确“左侧固定宽，右侧自适应”的布局...
本主题将深入探讨如何利用CSS和JavaScript实现蒙版的居中技术，并讲解如何使用JavaScript获取div的宽度和高度。 首先，让我们了解CSS中的居中技术。在CSS中，有多种方法可以实现元素的水平和垂直居中。以下是一些...
在AngularJS开发中，页面自适应高度是一个常见的需求，特别是在构建响应式布局或者单页应用(SPA)时，为了提供良好的用户体验，需要确保内容区域能够根据浏览器窗口的大小自动调整高度，以避免出现滚动条或者空白区域...
15. **自定义滚动条**：改变浏览器默认滚动条的样式。 这些源码不仅可以帮助初学者理解CSS和DIV的组合应用，也为有经验的开发者提供了灵感和参考。通过学习和实践这些源码，你可以提升你的前端开发技能，创造出更具...