设置div高度auto，滚动即可使用
在云计算领域，div的高度设置为auto是一个常见的HTML元素，用于设置一个div元素的高度，使其能够根据内容自适应高度。这种高度自适应的div在网页中通常用于实现一些滚动效果或者实现一些自适应的布局。
设置div高度为auto的方法很简单，只需要在div标签中添加一个style属性，并在该属性中设置height: auto即可。例如：
<div style="height: auto;">
内容...
</div>在这个例子中，div元素的高度被设置为auto，因此该元素会根据内容自适应高度。
除了使用height: auto属性之外，还可以使用overflow属性来实现滚动效果。例如：
<div style="overflow-y: auto;">
内容...
</div>在这个例子中，div元素设置了overflow-y属性，并将其值设置为auto，这样当div元素的内容超过其高度时，就会自动出现滚动条。
总之，设置div高度为auto是HTML中一个非常常见的用法，可以用于实现自适应布局和滚动效果。
相关·内容
2回答
我有一个小的网页应用程序，我正在设计，我有一个非常奇怪的问题。内部内容总是在页面折叠下面剪掉--你不能向下滚动来阅读所有的文本。我已经在Mobile和Chrome/Firefox的桌面上尝试过这一点，但没有成功。
活动网址是
任何我能尝试的建议都会有很大帮助。我基本上有ID #content的div，它保存白色BG和页面文本。我得到了overflow: auto;，它应该在这个div中创建滚动条，甚至有height: 100%;。我完全搞不懂这个问题是什么--再次感谢你的帮助！
浏览 9提问于2012-04-18得票数 1
回答已采纳
4回答
我有以下代码：
<div class="container">
<div class="fixed-area">
<div class="content"></div>
</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
html, body, body * {
z-index: 3;
}
div.container {
height: 100%;
浏览 4提问于2014-05-08得票数 0
回答已采纳
2回答
我试图在我的div内建立一个可滚动的区域，就像下面的图像一样。我只希望滚动区域改变高度在不同的屏幕高度和滚动相应。
问题是，如果可滚动的内容足够大，它将使整个页面滚动。如果它很小，页脚将正确地停留在底部。
这是我目前所拥有的
* {
margin: 0;
padding: 0;
width: 100%;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
.header {
height: 30px;
background-color
浏览 3提问于2021-11-28得票数 1
回答已采纳
我们有一个显示在iframe中的Qucksight仪表板
<iframe src="https://ap-southeast-2.quicksight.aws.amazon.com/.../" height="3200px" overflow="auto" width="100%" frameborder="0"></iframe>
iframe正确显示，仪表板也会出现。现在仪表板本身有多个选项卡，而每个选项卡包含不同长度的不同内容。
如上所述，高度被手动设置为固定的3200px，这将导致内
浏览 1提问于2019-10-01得票数 4
3回答
没有固定高度的滚动div
、、、、
我需要构建一个动态调整大小的滚动div。
div应该动态调整大小以适应屏幕。但是如果内容无法显示在屏幕上，它应该会显示一个滚动条。因此，浏览器自己的滚动条永远不需要激活。
通过将另一个div放入其中并使用overflow: auto，我可以让滚动条出现在div中。
<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
<div id="gridcontent" style="height:100%">
浏览 1提问于2011-04-06得票数 34
回答已采纳
太多的信息如何阻止flex孩子的成长，但太难找出如何阻止flex父母的成长(因为孩子)。
考虑以下布局：
外部元素的高度和宽度是固定的(可用于本机应用程序)
页眉和页脚没有增长，也没有缩小。而且，页脚总是在底部。
主要内容(页眉和页脚之间)占用所有可用空间。
主要内容没有滚动。
但内部元素可以滚动。例如，下面的滚动视图标题：
初步解决办法：
.layout {
display: flex;
flex-direction: column;
width: 640px;
height: 300px;
background: rg
浏览 1提问于2019-07-01得票数 4
回答已采纳
2回答
我有滚动框在我的网站，我想让它移动使用主滚动条.. 这是我的预演： ? 下面是我的代码html： <div id="wrapper">
<section>
<div class="row">
<div class="col-md-6 service-one">
<h1 class="header-caption"&
浏览 9提问于2021-06-24得票数 0
回答已采纳
下面是滚动窗口后我的窗口图像的屏幕截图
我给我的头部和主要部分使用flex的高度为45px。在主要部分中，我有左部分和右部分。每当我最小化或最大化我的窗口时，我希望我的左侧部分采用全屏高度。
这是我的页面在我滚动时的样子。虽然我已经设置了100%的高度，但左侧面板没有通过滚动进行调整
HTML
<body>
<header></header>
<div class="main-section">
<div class="left-section"></div>
浏览 0提问于2016-05-15得票数 0
具有固定高度的JQUERY，div (带有滚动条)如何动画，直到它不再需要滚动条？
我在一个页面上有一个div，它的CSS height:200px设置使DIV有一个垂直滚动条，允许用户滚动一串文本。
我想让DIV动画来扩展高度，直到显示div中的所有内容，这意味着没有更多的滚动条
我尝试了以下几种方法：
$("#view-container").animate({"height": "auto"}, "slow");
但这并不起作用，而这个却起作用了：
$("#view-container").animate({
浏览 2提问于2010-05-30得票数 0
回答已采纳
2回答
如果div的高度大于
、、、、
好的，我有一个div，作为嵌套在这个div中的两个div(用文本填充)的背景。一次只显示这两个div中的一个(通过按钮切换)，因为这些div的大小不同，所以div会增长以适应文本。但我希望div停止增长超过343，因为overflow:auto已经应用于div，所以内容将变得可滚动。但这并没有发生，切换完美，但div只是增长到一个巨大的大小，而不是停止在343px。这里是小提琴：
浏览 0提问于2012-02-01得票数 0
回答已采纳
1回答
我在弹出窗口中有一个div，它包含要显示在弹出窗口中的内容。
现在，我正在实现它，使属性溢出:auto，但是这里有一个问题。
这是我的div：
<div style="max-height:500px;max-width:500px;overflow:auto;">
<strong>Ad Tag for "sdk call test - greystripe"</strong><br><br>
<pre>
<sdkcall network="greystripe&
浏览 1提问于2011-09-30得票数 0
回答已采纳
3回答
我正在尝试以下的风格：
.scrollDiv {
height:auto;
max-height:100%;
overflow:auto;
}
我的要求是：
div的max-height等于屏幕高度
如果div中的内容超过屏幕大小，则滚动条应该出现在div中。
浏览 4提问于2013-12-10得票数 47
回答已采纳
我的代码如下：
<div id="frame1" style="overflow-y: auto;overflow-x: auto;width:87.5%;height:100%;" >
content
</div>
这里声明div作为一个可滚动的div，但它不会随着窗口大小的调整而调整大小。
我有一种情况，我需要在同一行上，当窗口调整大小和div的最终接触时，我需要它们不换行，而是启用水平和垂直滚动。
请帮帮我。
浏览 0提问于2011-02-21得票数 0
回答已采纳
3回答
我在这儿把头发扯开了。有谁知道我怎么能得到一个div来填充屏幕的水平和垂直的？我可以让它水平填充，但它只是拒绝填充垂直，除非一个指定的宽度像素。我做错了什么？
这就是我想要完成的，不用滚动就可以得到底部填充：
谢谢!
HTML：
<div id="main">
<div class="main_content"></div>
</div>
CSS：
#main {
margin-left:auto;
margin-right:auto;
height:100%;
width:auto;
padd
浏览 3提问于2015-06-10得票数 1
回答已采纳
3回答
我有几个嵌套，我想让我的最深的垂直滚动。
在CSS中，我尝试添加：
overflow-x: hidden; /* horizontal */
overflow-y: auto; /* vertical */
对于我分配给的类，但这似乎不起作用。更改overflow-y:是；也不起作用。
怎样才能做到这一点。我想让它滚动，因为它填充了MySQL数据，而另一个div只是提供了可选择的标准来创建查询并运行它。
我很欣赏你的想法。
示例：
<div id="content">
<div id="slidingDivKeynotePresentatio
浏览 1提问于2010-12-21得票数 0
回答已采纳
我有一个div，它的高度要小得多。我无法访问位于div底部的一些子元素。我试图使用element .elements.last.wd.location_once_scrolled_into_view滚动，但我无法滚动它。
然后，我尝试查看是否可以增加div的高度，以便脚本可以查看所有节点。最初的风格是style = 'overflow-y:auto;overflow-x:auto;width:150px;height: 350px;
我用来修改它的代码是
element = @browser.div(:id => 'div:d')
puts element.att
浏览 1提问于2014-07-17得票数 0
回答已采纳
我有两个迪夫并排。
左div有不同的高度，如何使右div自动调整大小为左div？如果右div的内容大于左div，则应该添加一个滚动条。
<div class="wrapper">
<div class="left"><!-- PHP Generated Content --></div>
<div class="right"><!-- PHP Generated Content --></div>
</div>
.left{
浏览 9提问于2013-01-12得票数 0
1回答
表在div溢出中
、、、
我在div中有一个表，并在这个容器div中设置了我的overflow:auto。我得到一个水平滚动条，但当有很多行时，不是垂直滚动条。有什么问题吗？
浏览 0提问于2012-01-06得票数 2
1回答
IE8和溢出
、、
我有一个IE8的问题，当放置一个带有"overflow: auto“的div时，只显示垂直滚动，而不显示水平滚动。
<div class="pnct" style="margin-right: 10px; height: 400px; overflow: auto">
任何建议。谢谢
浏览 0提问于2011-11-16得票数 0
回答已采纳
4回答
我对我的页面上的垂直滚动条有问题。我在div中的ul中有很多项目，我尝试了在div的样式中使用overflow:auto，但它没有帮助。如何将垂直滚动条添加到ul或div？
<div id="content">
<p>some text</p>
<ul>
<li>text</li>
.....
<li>text</li>
</div>
浏览 0提问于2010-11-05得票数 52
回答已采纳
4回答
我有一个垂直卷轴的布局。可滚动div中的一个子元素绝对定位为一个较大的顶值，在父元素上引入一个垂直滚动条。可滚动父div还具有一些子div元素(让我们称它们为支柱)，它们通过位置(绝对值和左值)水平地相邻。
以下是HTML标记：
<div id="root" style="height: 250px; position: relative;">
<div class="stretch">
<div id="container" class="container">
浏览 2提问于2015-05-05得票数 11
回答已采纳
我正在尝试创建一个固定的div，这样即使我向下滚动页面，div仍然位于页面的中心。但是我有一个问题，即使向下滚动，div的某些部分仍然隐藏。请查看此以查看代码和问题。
HTML:
<div class="wrap">
<div class="main">Normal div </div>
<div class="box">This should be in the slide down if page is scrolled down.</div>
</div
浏览 2提问于2011-08-26得票数 1
回答已采纳
2回答
我有一个带有容器的布局，然后在该容器中有另一个用于内容的div。我对它进行了设置，如果一个表比容器大，就会有一个滚动条。
但是，许多表格都很长，因此为了到达水平滚动条，您必须一直向下滚动到页面底部，向右滚动，然后向上滚动到页面顶部才能查看信息。
有没有办法让div的水平滚动条处于默认/主水平滚动条位置？
body {
height: 100%;
width: 100%;
background: #e8d7b5;
margin:0px;
padding:0px 0px 0px 0px;
font-family: Arial, Helvetic
浏览 0提问于2012-09-24得票数 2
5回答
我想要一个div，如果div的高度超过450px，就会有滚动条。我可以通过在div中添加一个类名，比如fixedScroll_450来做到这一点。 <div class="fixedScroll_450" id="content"></div> 现在div的内容将被动态生成，如果它超过450px的高度，就会有滚动条，否则就不会。现在来看我在类中添加的样式 .fixedScroll_450{
min-height: 450px;
max-height: 450px;
width: 100%;
margin: 0;
浏览 44提问于2016-05-25得票数 0
回答已采纳
如果你有一个div：
<div id="test">
<img src="http://..." />
</div>
使用CSS：
#test {
height: x;
max-height: x + y;
overflow: auto;
}
假设div总是超过x的初始高度，并且在x+y处停止增长(并开始滚动)作为高度x+y+z加载的图像，这是安全的吗？
如果不是，我将如何在现代浏览器中一致地实现这种行为？
浏览 1提问于2013-07-26得票数 1
回答已采纳
我的容器div没有扩展到适合它的子div -它有一个top: 20px值。我甚至没有浮点数，并且使用了overflow:hidden (裁剪子div的一部分)或overflow:auto (创建滚动条)。
请参阅代码示例：
<div class="container">
<div id="model">fdsf</div>
</div>
感谢对这个问题的任何解决方案。
浏览 1提问于2016-03-31得票数 2
1回答
我试图得到一个内部div来显示y轴滚动条，而不是外部div。
在这个例子中，外部div正在滚动，其中包括我不想要的菜单。
CSS
div#container
{
overflow: auto;
width: 90%;
height: 65%;
position: absolute;
top: 100px;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto -10px;
padding: 10p
浏览 1提问于2013-09-06得票数 7
回答已采纳
我正在使用jQueryUI对话框中的jQueryUI选项卡。每个选项卡面板中的内容可能非常大--例如，每个选项卡面板中可能有一个包含数百行的表。因此需要使用滚动条来导航内容。
默认情况下，对话框面板显示自己的滚动条--这并不是我想要的。此滚动条使导航选项卡本身向上移动和移出视图。我更喜欢让每个选项卡面板在必要时显示自己的滚动条，但让导航选项卡保持可见。我尝试为对话框面板设置"overflow:hidden“，然后为各个选项卡面板设置"overflow:auto”(如下所示)。但是，即使内容需要，选项卡面板也不会获得滚动条。
下面是一个显示问题的(简化的)测试用例--包括我尝试使
浏览 3提问于2011-09-11得票数 2
回答已采纳
1回答
我在一个高度为100%的容器(.inner)中有三个子元素(.container)。在那之后，我有另一个div (.post)，它不会被推到容器下面。
这是一把小提琴
HTML：
<html>
<body>
<div class="container">
<div class="inner">Inner1</div>
<div class="inner">Inner2</div>
<div class="inner"&
浏览 3提问于2015-01-03得票数 1
回答已采纳
4回答
我有一个有5个水平div的网站，所有这些都是浮动的:左和%宽。左边的那个我想要有文字和一个滚动条。但是，只有当我给滚动条指定一个位置时，滚动条才会显示出来:绝对。在小提琴里试一试。当我这样做的时候，div忽略了其他的4，他们就越界了。我怎么处理这件事？
jsfiddle > 向CSS中的以下div添加位置:绝对值；你会看到它起作用的，但是div离开了..。
#left{
float:left;
background-color:#C00;
width:15%;
height:100%;
overflow:auto;
top: 0px;
浏览 6提问于2013-10-03得票数 0
回答已采纳
3回答
我有一个jqGrid，它使用比对话框高度更长的表单添加/编辑对话框，但是对话框不会滚动。我尝试在对话框中添加overflow: auto样式，但没有效果：
$("div.ui-jqdialog-content").css("overflow", "auto");
不过，如果我将auto更改为scroll，至少会看到滚动条，但仍然没有滚动：
$("div.ui-jqdialog-content").css("overflow", "scroll");
这至少给了我一线希望，希望我走在正确的轨道上。
A
浏览 0提问于2010-05-21得票数 1
回答已采纳
我正在使用Optiscroll jquery插件来自定义默认的浏览器滚动条。我想更改正文滚动条。
$('body').optiscroll()
这不管用。包装器下的所有东西都藏起来了。
我在body中添加了一个包装器，但它也不起作用。
$('.wrapper').optiscroll()
<body>
<div class="wrapper optiscroll">
<!-- Code here-->
</div>
</body>
有什么解决办法吗？
浏览 0提问于2016-10-30得票数 1
3回答
我确实有一个div，如果其中的文本太大，我希望出现一个滚动条(overflow-y: auto; height: 300px;)。但是，我的div已经包含属性height:auto; (为了垂直对齐起见)。无论如何，我是否可以保留height:auto，并在必要时仍然显示滚动条？
HTML：
<div class = 'valign scrollbar'>
My Text
</div>
CSS：
.valign {
height: auto;
}
.scrollbar {
height: 300px;
overflow-y: auto;
}
浏览 1提问于2015-06-01得票数 4
回答已采纳
2回答
带滚动的弹出型菜单
、、、、
我正在尝试创建一个弹出式菜单，如果它比屏幕大，它会有滚动内置。我似乎想不出如何使用原生的overflow-y滚动属性来做到这一点。每次我设置溢出时-y:auto，然后弹出的菜单就嵌套在父div中，并有一个滚动条。
有谁有什么想法吗？
谢谢!
浏览 0提问于2009-12-07得票数 0
我使用下面的代码和一个JS .scroll来检测底部视口滚动条何时被横向滚动(然后根据该事件执行一些操作)。当我瞄准HTML标签时，它不会触发，但是如果我用.scroll瞄准BODY标签，它就会触发。
我看到的主体标签滚动条的问题是，只有当你一直滚动到5000px的底部时，它才会显示出来，我将内部div设置为5000px。对于我认为是自然的，HTML-底部-视窗-滚动条，它总是坐在浏览器窗口的底部，如果有滚动到的东西，但我不知道如何检测它的移动。
.scroll有没有一种方法可以检测到它正在滚动，或者有没有其他方法可以检测视口是否正在横向滚动？
<html>
<head>
浏览 32提问于2018-08-15得票数 1
我有一个mat-tab-group和两个选项卡-基本搜索和预先搜索。由于高级搜索有更多的表单字段，所以我想动态地修改.mat-tab-body-content类的.mat-tab-body-content属性。
<mat-tab-group (selectedTabChange)="tabChanged($event)">
<mat-tab label="Basic">
<ng-template matTabContent>
<!-- .. -->
</ng-template&g
浏览 1提问于2018-10-16得票数 0
回答已采纳
Google Chrome似乎没有在首次呈现Flexbox容器时考虑Flex项的垂直滚动条。
这是页面刚刚加载后的样子：
这是稍微改变容器宽度后的样子。
IE10、IE11和FF确实考虑到了滚动条。
这是。
HTML：
<div class="subj">
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsuxm dolor sit amet, ...
</div>
<div>
浏览 2提问于2015-03-16得票数 1
2回答
我有一个粘性的导航栏，我正在使用twitter bootstrap。每当我滚动经过某个点时，我的粘性导航栏就会显示出来，但当它显示出来时，我的内容就会跳起来。我想要的是我的内容停留在原地，而不是跳跃。
我的HTML
<body>
<div class="top_menu_wrapper">
<div class="toggle_wrapper">
<ul>
<li>
<div class="main_menu_header"
浏览 1提问于2015-04-22得票数 0
考虑一下这个演示布局：
<div style="height: 100%">
<div style="height: 100px;">Header</div>
<div style="overflow: scroll; height: auto;">
...content...
</div>
</div>
()
内部内容div应该消耗尽可能多的高度(即100% -100 up )并滚动其内容。这有可能吗？
(浏览器兼容性不是问题。)
浏览 3提问于2016-05-03得票数 2
回答已采纳
5回答
CSS：
html,body {
width: 100%;
height: 100%;
left: 0;
top: 0;
bottom:0;
margin: auto;
font-family: "Alef";
background: #767E58;
background-size: contain;
background-image: url("../img/back1024.jpg");
overflow-y: auto;
overflow: auto;
}
.container {
height: 10
浏览 10提问于2014-12-17得票数 8
2回答
魅力条不会滚动到底部
、、、
我有一个问题，一个魅力酒吧，没有滚动底部的选择。这就是我在做时所看到的
我知道这个问题是造成的，因为我使用的是一个固定位置92‘m从顶部。如果我将.charms更改为top:0，滚动将按预期的方式运行，但这不是一个选项。下面的代码可以固定为滚动并看起来像这样吗？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
margin:0;
浏览 0提问于2018-12-10得票数 1
回答已采纳
1回答
我有一些简单的标记..。
<div class="container">
<div id="conversation">...</div>
<div class="keyboard">...</div>
</div>
作为一个垂直的挠曲盒..。
.container {
margin: 1em 1em 0;
max-width: 30em;
margin-left: auto;
margin-right: auto;
浏览 5提问于2017-04-22得票数 1
回答已采纳
2回答
我的目标是设置一个带有粘性标题和左边栏的布局，以及可以滚动的非粘性DashboardBody (绿色边框)(在这种情况下，顶部的内容会消失在粘性标题下)。我使用的是styled-components，头部下面的两个框被包装在一个使用flexbox的BelowNavContainer中。 组件ProjectContainer包含整个视图(包括页眉和侧边栏)。因为我只想在DashboardBody部件上有一个滚动条，所以我为它设置了overflow: auto，为ProjectContainer设置了overflow: hidden。然而，这导致用户看不到DashboardBody的底部-滚动条
浏览 42提问于2019-06-28得票数 0
回答已采纳
我已经按照下面的代码设置了我的HTML、CSS。我还添加了一个JSFiddle链接，因为它将更方便地看到代码的运行。
我遇到的问题是，当#inner-right div中有很多文本在#right-col div中时，我想为#inner-right only显示一个滚动条。我的当前代码显示了两个滚动条：#inner-div和#right-col。如果我将#right-col上的CSS更改为overflow: hidden以摆脱外部滚动条，内部滚动条也会消失，#inner-right不再尊重max-height规则。
我如何设置它，使滚动条只出现在#inner-right上时，它的内容变得太大。
浏览 6提问于2013-03-26得票数 43
回答已采纳
3回答
如何为使用jquery mobile的页面上的地图设置100%的大小？到目前为止，我尝试设置高度:100%，但没有效果，我仍然有滚动条。
如果我使用height:auto，我的地图不会显示
<div id="map_canvas" style="width:100%; height:90%; position:absolute; top:121px;" ></div>
浏览 0提问于2012-11-14得票数 0
回答已采纳
2回答
无滚动的底部中心的div
、、、
我想要创建一个静态页面与youtube视频，没有任何内容。我需要视频div在页面的中心-底部，没有滚动，没有高度和宽度提到{，因为我是使用响应css}。我试着遵循下面的代码
html：
<div class="video-content">
<div class="video-container"><iframe width="420" height="315" src="//www.youtube.com/embed/fMJ21v7mX7U" frameborder="0
浏览 0提问于2014-03-17得票数 0
回答已采纳
1回答
使用视口将站点保持在固定大小？
、、、、
我想要一个固定像素大小的页面总是有相同的百分比高度。
意味着当我有一个高度为1500px的div并在1366x768屏幕上查看它时，整个1500px的div应该仍然是完全可见的。
.fix{
width:400px;
height:400px;
background-color:green;
margin:0 auto;
}
<div class="fix"></div>
浏览 1提问于2016-11-18得票数 0
1回答
我想要创建一个带有右浮动列的两列布局，其中包含一个div，一旦其内容溢出浏览器窗口高度，该列就可滚动。
这是我正在处理的html代码：
<div class=container>
<div class=column_A>A</div>
<div class=column_B>B
<div class=content>C<br><br><br><br><br><br><br><br><br>
<br>&l
浏览 2提问于2012-03-06得票数 0
回答已采纳
1回答
我有一个包装器div，它具有动态高度，但通常不应该超过窗口高度。 在包装器内部有两列，每列的高度取决于可用的内容。 左边的列应该始终在内部不滚动的情况下显示，如果它比窗口高度更深，那么包装器应该滚动。 如果右边的列比窗口高度深，那么它应该在内部滚动，并且它不应该使包装器滚动。 使用CSS网格，我可以通过限制右列的高度来让这个布局在右列比左列更深的时候工作，但是当左列超过包装器的高度并导致它滚动时，我希望右列匹配它的高度，但我找不到实现这一点的方法。 我已经创建了一个简单的示例来演示布局。 .wrapper {
display: grid;
grid-column-gap:
浏览 11提问于2020-05-01得票数 0
8回答
我通常会像这样布置我的结构：
<div id="all">
<div id="page">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
其中正文将包含背景图案，"all“将包含页面上下移动的下拉阴影，" page”通常也可
浏览 0提问于2010-03-16得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
