为什么问题div和按钮不会随着其内容展开？
问题div和按钮不会随着其内容展开的原因是因为它们的高度没有被自动调整。在HTML和CSS中，元素的高度默认是根据其内容的大小来确定的。但是，对于问题div和按钮这样的元素，如果没有设置合适的样式，它们的高度将保持不变，不会根据内容的增加而自动展开。
为了解决这个问题，可以使用CSS的属性来调整元素的高度。一种常见的方法是使用height属性来设置元素的固定高度，但这样会导致元素无法根据内容的变化而自动展开。
另一种更灵活的方法是使用overflow属性来控制元素的溢出行为。通过将overflow属性设置为auto或hidden，可以使元素根据内容的增加而自动展开。例如，将问题div的样式设置为overflow: auto;，按钮的样式设置为overflow: hidden;，这样它们就会根据内容的大小自动展开。
此外，还可以使用CSS的display属性来改变元素的显示方式。例如，将问题div的样式设置为display: block;，按钮的样式设置为display: inline-block;，这样它们会根据内容的大小自动调整宽度和高度。
总结起来，问题div和按钮不会随着其内容展开的原因是因为它们的高度没有被自动调整。解决这个问题的方法包括使用overflow属性来控制溢出行为，使用display属性来改变显示方式，以及设置合适的样式来实现自动展开。
相关·内容
我正在使用jQueryUI对话框中的jQueryUI选项卡。每个选项卡面板中的内容可能非常大--例如，每个选项卡面板中可能有一个包含数百行的表。因此需要使用滚动条来导航内容。
默认情况下，对话框面板显示自己的滚动条--这并不是我想要的。此滚动条使导航选项卡本身向上移动和移出视图。我更喜欢让每个选项卡面板在必要时显示自己的滚动条，但让导航选项卡保持可见。我尝试为对话框面板设置"overflow:hidden“，然后为各个选项卡面板设置"overflow:auto”(如下所示)。但是，即使内容需要，选项卡面板也不会获得滚动条。
下面是一个显示问题的(简化的)测试用例--包括我尝试使
浏览 3提问于2011-09-11得票数 2
回答已采纳
1回答
我一直在尝试将div的内容(一个图像、一个搜索栏和三个按钮堆叠在一起)放入一个隐藏了溢出css样式的div中。div的CSS如下所示：
.jumbotron {
overflow: hidden;
display: block;
padding: 0;
margin-bottom: 0;
background: #000000 url('../landing_background.jpg') no-repeat center center fixed;
background-size: cover;
position:relative;
}
一些可以
浏览 8提问于2017-08-09得票数 0
2回答
我想使用文本溢出:省略来在文本太长的时候剪切一些文本，但是当我使用溢出:隐藏显示:内联块时，我会遇到一些问题。
html：
<span class="text">
<span class="inner left">Click to add overflow</span>
<span class="inner right"> long text here</span>
</span>
<div class="bottom"></
浏览 1提问于2015-05-12得票数 4
回答已采纳
1回答
我偶然发现了一些发生在我的弹性子项目上的事情，如所示。
这是代码：
<div style="position:absolute; top:10px; left:10px; background-color:yellow; height:50px; width:200px; display:flex; flex-direction:column;">
<div style="overflow:hidden;">inner div text<br>inner div text<br>inner div text
浏览 2提问于2015-11-12得票数 1
回答已采纳
这个问题的示例：
我有下面的css代码：
.wizard
{
display: block;
width: 100%;
}
.wizard > .steps
{
position: relative;
display: block;
width: 100%;
}
.wizard > .content
{
display: block;
margin: 0.5em;
position: relative;
width: auto;
min-height: 35em;
overflow: vi
浏览 1提问于2014-08-12得票数 0
回答已采纳
2回答
看起来，中嵌套在父div中的所有元素都从我的父div的底部边框溢出了。
如您所见，图像div覆盖父文件和标题上的段落。
类似的问题必须处理浮动元素，但这并不适用于这里，因为我不使用这些
为什么“位置:相对”？
这是代码，以及为您的，非常感谢，调整准备好的小提琴。
<!DOCTYPE html>
<html>
<title>DISSECTIONS</title>
<head>
<link rel="stylesheet" type="text/css
浏览 0提问于2016-01-19得票数 5
回答已采纳
4回答
溢出:隐藏不适用于图像
、、、
我在html中使用以下代码来显示和图像。我想让它“缩放以填充”，其中高度是浏览器的高度，宽度是基于高度缩放的。我想隐藏所有溢出，以防止后面的div丢失其内容。这是我尝试使用的代码：
<div id="image1">
<img src="http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU"/>
<style>
#image1{
overflow: hidden;
width: auto
height: 100vh;
}
</style>
</div
浏览 0提问于2015-07-03得票数 1
1回答
为什么颜色输入不像所有其他输入类型，当涉及到柔性盒容器中的伸缩高度时？
在下面显示的代码示例中，我试图演示这个问题。如您所见，除了color类型的元素外，所有color元素都延伸到strong元素的等高。
是怎么回事，我如何仍然实现一个“拉伸”的颜色输入高度，而不使用任何静态的高度造型值？
.flexRow {
display: flex;
margin: 10px;
}
input {
padding: 0;
overflow: hidden;
}
strong {
padding: 20px 10px;
background-color: #ccc;
}
<
浏览 1提问于2018-11-05得票数 3
回答已采纳
html
<ul>
<li>
<button>first part</button>
</li>
<li>
<button>second part</button>
</li>
<li>
<button>third part</button>
</li>
</ul>
<div id="bottom">Believe Me</div>
cs
浏览 0提问于2016-03-04得票数 0
回答已采纳
2回答
如何将div层设置为以像素为单位的固定高度，但在同一时间内，该高度要以较小的分辨率作出响应？
假设div的高度是：
<div id="size"></div>
CSS
#size {
height:500px;
}
如果我使高度100%，它将调整大小，它将作出反应。那么，为什么我需要这个有固定的大小和响应在同一时间，因为高度，我使用它作为转换元素，发生在这个div一旦点击。因此，我想知道这个问题是否有解决办法。
下面是一个FIDDLe示例：
现在的风格：
#index_slider
{
width:100%;
position: relat
浏览 4提问于2014-01-31得票数 0
我有以下代码：
<div id="container">
<div id="top">TOP TEXT
</div>
<div id="middle">MIDDLE TEXT
</div>
<div id="bottom">BOTTOM TEXT
</div>
</div>
使用以下css：
#top { font-size: 13px;}
#middle { font-size: 40px;}
#b
浏览 3提问于2011-11-18得票数 2
回答已采纳
2回答
我在一个HTML文件中有一个div，它包含查询的所有搜索结果，所以它的大小是动态的。我给它提供了用CSS编写的以下样式：
#content {
position: absolute;
width: 75%;
min-height: 100%;
left: 13%;
right: 12%;
top: 12%;
background-color: #FFF;
border-left: 3px solid #81DAF5;
border-bottom: 3px solid #81DAF5;
word-wrap: break-word;
}
如果没有太多的搜索结果，那么一切都很好。e.如果它们都适合屏
浏览 0提问于2017-06-20得票数 0
我有以下调用聊天的代码：
<div id="chatContainer">
<span id="chatClose" class="chat-close"></span>
<div id="chatHeader" >Chat</div>
<p style="font-size: 15px;padding: 8px;color:white;">
<b>
<img src="frontend
浏览 0提问于2019-09-02得票数 0
回答已采纳
2回答
为什么父div元素在其子元素被浮动时停止调整高度？我有以下HTML片段
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="container">
<div id="overfl
浏览 15提问于2016-08-10得票数 0
3回答
我有一个div (absolute-container)，它绝对定位于静态定位的父级。我的目标是使绝对容器具有设置浏览器的高度，最大高度为600 max。它当前的起始位置是~页面的中部，我希望它能扩展到浏览器页面的底部，并且在更新浏览器大小时，高度会动态变化。overflow-scroll-container也可能只包含3-4个选项，在这种情况下，div高度不应该扩展到浏览器的底部。
.parent {
position: static;
}
.absolute-container {
display: block;
position: absolute;
z
浏览 4提问于2021-09-01得票数 0
我有一个布局，在这个布局中，我有一个可滚动的项目列表，在列的上面和下面都有一些东西。列表应该占用列中它可用的空空间(我不想在它上指定一个特定的高度)，并且当列中的空空间不足以容纳所有项时，应该滚动。
是这种情况的JSFiddle。
注意，仅在scroller中使用几个scroller，它就会扩展到填充column中的空空间(如预期的那样)。但是，如果在item中再添加几个scroller，它就会扩展到适合其全部内容，而不是保持原来的大小，然后滚动其溢出的内容；即使它有overflow-y: scroll集！
但是，如果然后将scroller设置为有一个height of 0，那么问题就会得到
浏览 0提问于2018-10-17得票数 3
回答已采纳
我所拥有的是三个具有动态添加内容的容器。基本上，我希望这三行只占据浏览器窗口的高度。但我希望他们能根据他们的内在内容自动调整尺寸。
因此，如果它们都有相同的内容量，那么它们的高度大约为33%，然后是溢出: auto。或者，如果一个容器没有内容，而另两个容器有很多内容，那么没有内容的容器的高度应该是0，另外两个应该是50%。
而且，不需要支持IE --它只用于内部产品，只使用chrome和firefox浏览器，所以如果有css3解决方案，那就没问题了。
下面是我现在所拥有的没有按照我想要的方式工作的例子：
HTML：
<div class="container">
浏览 4提问于2012-07-25得票数 3
1回答
断断续续地调整尺寸
、、、
我在上有以下代码
HTML：
<main>
<details>
<summary>test summary 1</summary>
<div>test detail 1</div>
<div>test detail 2</div>
</details>
<details>
<summary>test summary 2</summary>
<div>test detail 3</
浏览 7提问于2015-12-03得票数 3
回答已采纳
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
回答已采纳
3回答
我正在使用本文中的说明创建一个多列列表：
简而言之，它是这样说的：
HTML：
<div class='block'>
<ul>
<li>
Item1
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
</div>
CSS：
.block {
border: 1px solid black;
padding:
浏览 0提问于2012-10-20得票数 13
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
