将auto-height设置为具有最内层绝对div的父div
是一种前端开发技术，用于实现父div的高度自适应最内层绝对定位的div的高度。
具体实现方法如下：
- 首先，将父div的position属性设置为relative，以便作为绝对定位元素的参考点。
- 然后，在父div中创建一个最内层的绝对定位的div，并将其position属性设置为absolute。
- 接下来，将最内层绝对定位的div的top、right、bottom和left属性设置为0，以使其紧贴父div的四个边界。
- 最后，将父div的height属性设置为auto，即可实现父div的高度自适应最内层绝对定位的div的高度。
这种技术常用于实现一些特殊布局需求，例如实现一个固定宽度但高度根据内容自适应的容器。
腾讯云提供了一系列与前端开发相关的产品和服务，例如云服务器、云存储、内容分发网络（CDN）等。您可以根据具体需求选择适合的产品进行开发和部署。
更多关于腾讯云前端开发相关产品和服务的信息，请参考腾讯云官方文档：腾讯云前端开发产品。
相关·内容
5回答
我的HTML：
<div class="outer">
<div class="inner">
Lorem Ipsum
<div class="innerest">
<!-- no content -->
</div>
</div>
<div class="inner">
Lorem Ipsum
<div class
浏览 0提问于2013-04-26得票数 1
回答已采纳
2回答
请看下面的内容
HTML：
<div class="container">
<div class="content">
<div class="space">
</div>
<div class="item">
DIV1
</div>
</div>
</div>
CSS：
.container {
position:relative;
height: 100%;
w
浏览 0提问于2013-07-15得票数 0
回答已采纳
在这个简单的html结构中有一个奇怪的问题。这是html代码
<body>
<div class='DatePicker' style="display: inline-block">
<div id="dayDiv" class='DayDiv BorderMe'>
<div id='upArrowDivs' class="BorderMe" style='display: inline-block;
浏览 0提问于2013-05-09得票数 1
回答已采纳
3回答
我在另一个div的下面设置了一个绝对位置div。当我最大化或最小化浏览器时，按下ctrl +/-，我的绝对位置div不会停留在原来的位置。有人能指出我在这里可能做错了什么吗？非常感谢。下面是我的代码：
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body
{
margin: 0px;
pa
浏览 3提问于2012-11-13得票数 0
回答已采纳
1回答
我有一些列表元素，如下所示：
<li class="item">
<a class="toggle"><h4>ämne<small>2010-04-17 kl 12:54 by <u>nike1</u></small></h4></a>
<div class="meddel">
<span>
<img style="max-width: 70%;
浏览 0提问于2010-04-18得票数 4
回答已采纳
2回答
相对于父级的绝对定位
、、、
我的假设是在使用绝对定位时，它是相对于父div的。然而，这个小提琴手似乎并没有与此相吻合。我要做的是做一个三排液体布局，中间排设置一个最小高度。顶部和底部有一个固定的高度。不幸的是，我只为IE7编写代码，并且没有在CSS中使用最小高度的奢侈。使用JQuery时，中心确实会调整大小，但是页脚不会相对于父类重新定位。下面是信息和弹琴。
浏览器: IE7
样式: CSS
HTML: 4.0严格
JQuery: 1.10.1
添加位置后的小提琴:包装的相对高度为100%
HTML
<div id="wrapper">
<div id="top"
浏览 0提问于2013-09-20得票数 0
回答已采纳
在给定的代码中，在div.text部分中，当我分配position: absolute时，display: block属性变得不活跃，我必须设置width: 100%来对齐中心的文本。理由是什么呢？
为什么我必须首先将position属性设置为容器的relative，以便将子元素的位置设置为absolute？如果我不设置父容器的position: relative，则元素相对于body标记定位。为什么？
body,
html {
height: 100%;
margin: 0;
}
div.first-div {
background-image: url(l
浏览 0提问于2019-04-12得票数 0
2回答
我在另一个div中有一个div，它的左右边框居中：
我希望将内部div更改为absolute，以便外部div在其后面向上流动：
现在它没有居中。有什么办法可以解决这个问题吗？
浏览 6提问于2011-03-04得票数 2
回答已采纳
我做了很多研究，找到了很多解决方案，几乎解决了我的问题，但没有一个是百分之百有效的。
最关键的部分是使用自定义帖子的永久链接，没有使永久链接的权利生效。
不可能使用类别，因为您不能复制类别，即使是子类别也是如此。我尝试只添加分类法，我尝试使用自定义分类法的自定义帖子
我可以有“产品”，“软件”和"cad"，因为如果你选择几个类别，只有一个显示在链接上
我想要这样的东西。创建一个帖子，选择分类，结果如下图所示
courses
|
|-cad
| |
| |-software one mysite.com/courses/cad/software-one
|
浏览 2提问于2015-04-24得票数 0
1回答
正如您在中看到的，段落不是它应该在的位置，因为我重叠了两个图像。我怎么才能解决这个问题？
<h1>Overlaping two images</h1>
<div>
<img src="http://img.youtube.com/vi/brMyE7To7Sg/0.jpg" />
<img src="http://oi57.tinypic.com/2u8kr2s.jpg" />
</div>
<br/>
<p>For some reason, thi
浏览 1提问于2015-03-07得票数 1
回答已采纳
有没有办法指示div填充100%的可用页面高度，直到它获得足够的内容来需要滚动条？：
// browser height: 600px:
<div>
// empty, so just be 600px tall.
</div>
....
// when it gets content and gets taller than
// the page, don't need to auto-height itself
// anymore.
<div>
<ul>
<li></li>
浏览 0提问于2010-07-26得票数 0
4回答
我有这样一段代码，我真的不明白它为什么会起作用：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#divWraper
{
浏览 0提问于2010-02-04得票数 0
回答已采纳
1回答
试图获得一些“按钮”来移动一个动态背景图像。到目前为止，背景图像确实会调整大小。相对定位多个按钮(其中包含工具提示和链接)也工作.partially...moving是从左到右的相对百分比，但不是从上到下。垂直方向上，按钮只是叠加并保持在那个位置。目标是使按钮保持在图像上的同一位置，无论大小如何。我遗漏了什么？难道我不理解父母/孩子的流动吗？编码错误？
CSS
html {
background: url(img/tundrabiome.jpg) no-repeat center center fixed;
background-size: cover;
}
body {
font-fam
浏览 2提问于2014-09-22得票数 2
回答已采纳
4回答
我有一个<div>，其中有许多其他的<div>，每个都处于不同的嵌套级别。我不是给每个子<div>一个标识符，而是只给根<div>一个标识符。下面是一个例子：
<div class="a" id="a5">
<div class="b">
<div class="c">
<a class="d">
</a>
</div>
</div>
&
浏览 63提问于2011-03-17得票数 288
回答已采纳
2回答
我研究了相对定位和绝对定位，但我仍然对在选择其中一个位置后没有指定"top，left，right，bottom“会发生什么感到困惑。例如，在下面的代码中，我更改了容器的位置，当我将其从相对更改为绝对时，页脚做了一些时髦的事情。我读到，如果你添加"position:relative“并且不指定任何方向，它将完全停留在它应该在的位置。但使用firebug时，我在css中切换了这一行，顶部的菜单栏会稍微向左移动一点。怎么一回事？
HTML：
<div class="container">
<div id="heade
浏览 3提问于2012-05-25得票数 0
回答已采纳
2回答
我想创建一个滑块，所以下面是代码：
div#list_container {
position: relative;
width: 100%;
}
div#first_list {
position: absolute;
left: 0px;
top: 0px;
}
div#second_list {
position: absolute;
left: 70%;
top: 0px;
}
<div id="list_container">
<div id="first_list&
浏览 41提问于2020-08-03得票数 0
回答已采纳
我有以下布局：
<LinearLayout width:fill height:fill >
<RelativeLayout width:fill height:wrap >
<ImageView width:fill height:wrap >
<LinearLayout width:wrap height:wrap />
</RelativeLayout>
</LinearLayout>
当涉及到垂直属性时，最里面的LinearLayout似乎不知道它在RelativeLayout内部。重力只在
浏览 0提问于2011-11-29得票数 2
回答已采纳
1回答
在php循环中显示正确的问题
、、、、
我为我的应用程序创建了一个通知区域。我想在每个选项卡的右侧显示一个红色的小项目符号。
我使用了一个绝对位置，现在所有页面上都出现了项目符号。
下面是我的代码和CSS：
.read-button{
font-size: 8px;
color: #FC5D5D;
display:block;
position:absolute;
right:20px;
padding-top: 15px;
}
和我的PHP：
<?php foreach($messages as $mess) { ?>
<?php
$fro
浏览 0提问于2016-02-15得票数 0
我查过类似的问题，似乎没有一个决议适合我的问题。我有过页面的浮动，当我加载页脚时，它会位于网页最初结束的底部，然后向下滚动。帮助!
更新:我删除了
职位:固定
并尝试了一些其他的方法。我尝试过的任何其他东西，最终还是会坐在窗口底部的页脚上，并且能够简单地滚动通过它。还有其他的建议或代码编辑来尝试吗？
另外，我对“不使用负差”也很好奇，因为这是我过去的大部分结构。我如何在不完全摆脱我拥有的东西的情况下，用其他的东西来重组它呢？谢谢
html：
<!DOCTYPE html>
<head>
<meta charset="utf-8" /&g
浏览 1提问于2019-01-09得票数 0
我创建了一个列表和一个项目，以跟踪上选定的<li>项，单击。
HTML代码：
<div class="right">
<div id="bullet">♦</div>
<ul>
<li><a href="#link1">link1</a></li>
<li><a href="#link2">link2</a></li>
<li&g
浏览 0提问于2010-12-26得票数 1
回答已采纳
这是我的
<div class="overlay">
<div id="loading">
<img src="styles/images/30.gif">
</div>
</div>
我想让它垂直和水平地居中。
该图像仅为水平居中，如下面的屏幕快照所示：
我的CSS如下所示：
.overlay {
background: #e9e9e9;
display: none;
position: absolute;
top: 0;
right
浏览 3提问于2017-04-29得票数 1
回答已采纳
我在asp.net webforms中工作。我在div元素中有一个菜单控件。不知何故，菜单并没有停留在div中。它要么在div的底部，要么在div的外部。我基本上想让div的高度保持在30px，菜单垂直显示在中心。以下是我的代码：
<div id="mainnav" style="height:30px">
<asp:Menu ID="menuBarMaster" runat="server" Orientation="Horizontal" Width="100%
浏览 4提问于2016-09-16得票数 1
有没有一种方法可以让DIV元素占据页面上的所有高度？类似于：
div.left {
height: 100%;
width: 50%;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
我在谷歌上搜索了几次，但它们看起来都像是非常非常复杂的工作，可能是一个非常非常简单的问题和一个简单的解决方案。
浏览 3提问于2012-09-25得票数 7
回答已采纳
2回答
一行放在溢出内
、、、
我尝试做一个滑块，但是在一行中放置我所有的div标签时遇到了麻烦。我该怎么做？以及如何为#slider_content自动设置宽度
<div style="width: 100px; height: 20px; background: #FFA; overflow:hidden">
<div id="slider_content">
<div style="width:50px; height: 50px; background: #ccc; float:left">1&
浏览 2提问于2012-01-17得票数 0
回答已采纳
6回答
我有一个div，其中有一些东西，用户可以选择点击'x‘说“这不适用于我”，例如。
而不是删除div，我想在上面播放一个半透明的div。
我从一些复杂的javascript开始，以确定所讨论的div的大小和位置，并在其之上创建一个新的javascript。剧本给出的大小和位置在我看来大致是对的，但是重叠的div被放在了错误的位置。
然后我意识到(可能)有一种更简单的方法来做到这一点。
我在里面放了一个带有类“昏迷”的div，我想把它灭掉。停电css类的可见性设置为隐藏，因此javascript将在需要时将其设置为可见。
我遇到的问题是，即使使用这种方法，我似乎也无法让它精确地填充父div
浏览 0提问于2011-07-24得票数 4
回答已采纳
3回答
我在一个固定的侧边栏里创建了两个ul。我试着将蓝色ul对齐到固定div的底部，但它不起作用。
<div class="sidebar">
<ul style="background:green;">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<ul class="align-bottom" style="background:blue;">
<li>
浏览 0提问于2018-02-25得票数 0
回答已采纳
5回答
绝对位置和溢出隐藏
、、、、
我们有两个DIVs，一个嵌入在另一个中。如果外部DIV不是绝对定位的，则定位为绝对的内部DIV不服从外部DIV的溢出隐藏()。
有没有可能让内部DIV服从外部DIV的溢出隐藏，而不将外部DIV设置为绝对位置(因为这会弄乱我们的整个布局)？此外，内部DIV的相对位置也不是一个选项，因为我们需要从表TD ()中“生长”出来。
还有没有别的选择？
浏览 0提问于2011-01-05得票数 156
回答已采纳
在父div中有几个div的绝对位置。我已经将固定宽度设置为parent div。并且内部div的宽度设置为100%。
但是内部的div占据了整个浏览器的宽度。我希望内部div只和父div一样宽。
我如何才能做到这一点？(不更改绝对位置)
我的HTMl的一部分：
<div class="holder">
some</br>
sample</br>
text
</div>
CSS：
.parent{
width:250px;
}
.holder {
position: absolute;
width:
浏览 1提问于2014-10-25得票数 0
4回答
动态和自定义div定位
、、、
我有这个div结构
<div class="panel">
<div class="north"></div>
<div class="center"></div>
</div>
外部div是，我试着用百分比来定位div，
.north{height:30%}
.center{height:70%}
做得很好，我知道了
现在我被困在如何得到这个：
有什么帮助吗？
别忘了外罩是可以调整大小的。
是我的出发点。
编辑
我也试过
.panel{display
浏览 0提问于2012-06-14得票数 2
回答已采纳
如果没有为包含的元素指定display，则不会调整div的大小。元素是用javascript在代码中添加的。
下面是div和附加元素的CSS。
#page {
height: auto;
min-height: 83%;
padding-bottom: 20px;
}
.linkcard, .linkcard_init {
position: absolute;
padding: 0;
margin-top: 20px;
margin-left: 20px;
浏览 0提问于2011-09-22得票数 0
3回答
CSS关于绝对位置
、、、
下面是示例
如何使div (容器)具有height:auto而不是具有固定高度
.container{
width:auto;
height:auto;
background-color:black;
position:relative;
}
.text {
position:absolute;
width:50px;
height:50px;
background-color:red;
}
<div class=&#
浏览 3提问于2013-02-23得票数 0
4回答
使输入进入div的底部。
、、、
我不知道为什么这里的代码片段完全适合div，但是在我的托管站点和phpfiddle.org上，外部div的高度是内部内容的两倍，所以我尝试使用底部: 0；在要使内容进入外部div底部的输入上，但是它没有工作。我该怎么办呢？
#login {
border: 1px solid black;
position: absolute;
}
input {
bottom: 0;
}
<div id = 'login'>
<form method = 'POST' action = 'login.php'>
<input
浏览 0提问于2015-12-08得票数 0
回答已采纳
我试着让我的主页布局正常工作。
现在div "list“的高度应该比底部小80px。我用边距和位置做了一些测试:绝对的，但我不能得到它。
#body, #left, #map, #list {
height: 100%;
}
#left {
float:left;
width:270px;
}
#head {
height:80px;
background-color:blue;
}
#list {
overflow:auto;
background-color:green;
}
#map {
background-color:red;
}
浏览 2提问于2011-08-31得票数 0
1回答
我的模板中有一个名为home.html的离子网格元素，在该网格中有一行包含三列：
<ion-row>
<ion-col>...</ion-col>
<ion-col width-10>
<ion-row class="full-height j-a-center">
<div class="vrt-line"></div>
</ion-row>
</ion-col>
<ion-col>...</
浏览 0提问于2016-12-31得票数 0
4回答
我到处都找过了，就是找不到答案。
所以我在我的样式表中有一个DIV，它的位置是绝对的，并带有背景图像。
在DIV里面，我有一个我想要出现在DIV背景下的图标。
我试过z-index，但它似乎不起作用！？是不是跟我的DIV上的绝对位置有关？
浏览 1提问于2012-04-19得票数 0
回答已采纳
我要左撇子高度是窗户的100%。
<div id="left-div"></div>
<div id="content">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class=&#
浏览 4提问于2014-02-13得票数 1
回答已采纳
1回答
在尝试格式化页面时，我遇到了这个特殊的表单问题，添加了一个标题，并将其余的内容移到屏幕的10%以下，这样标题就不会隐藏在我正在放置的标题下面。这个CSS适合其他页面，只需将内容向下移动10% (我也尝试过使用填充)：
.content{
position: absolute;
top: 10%;
}
然而，当我把它放到这个特定的表单中时，它会压缩我所有的表单元素。我不太确定是什么原因造成的，因为我只是想在表格上增加空间。
下面是该.cshtml页面上的表单代码(此表单为VisualStudio2019年预先生成的代码的90%，并在<div class="conte
浏览 2提问于2020-08-09得票数 1
回答已采纳
我使用javascript动态添加一个css类到父div。然后，我尝试在父div中添加一个样式为position: absolute的子div。
因为child div是position: absolute，所以我希望它会显示在内容的上方。怎样才能让它显示在内容的上方？
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<h
浏览 1提问于2013-10-26得票数 0
2回答
我有这个简单的代码可以将两个div #container元素并排放置。其中每一个都有一个子div #child，我想相对于它的父(div #container)定位它。
<style>
.container {
float:left;
margin-right: 10px;
}
.child {
position: absolute;
left: 0.2ex;
}
</style>
<div class="container">a<br/>
<div class="chil
浏览 4提问于2012-10-23得票数 0
回答已采纳
1回答
<div id="wrapper" class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="span2 sidebar">sidebar</div>
<div class="span10 content">content</div>
浏览 0提问于2013-05-21得票数 5
回答已采纳
因此，我在使用jquery放置一个悬停工具提示时遇到了一个小问题--如果我的父div的css中的“位置”属性设置为“相对”，那么工具提示就会飞到屏幕的左上角。如果我删除了位置属性，那么世界上一切都很好，工具提示就回来了。
我不太了解jQuery或css的定位规则，所以问题是：
为什么这个职位:相对混乱的jQuery工具提示位置？如果我确实需要这个职位:相对的(我不需要)，我能做什么来解决这个问题？
有关守则是：
$("yay").hover(
function(){
// .position() uses position relative to the offse
浏览 6提问于2012-06-16得票数 1
回答已采纳
我正在做一个Jquery手风琴的东西。我想向包含折叠触发器标签的div中添加一个类。你可以看看我的代码。我想添加" first“类名到第一个"newsitems”类，当点击"Recession first in日本Video“标题时。
<!-- news items starts-->
<div class="newsitems">
<h3 class="business"> <a href="#" title="expa
浏览 0提问于2010-03-12得票数 0
回答已采纳
1回答
修复了定位元素的问题
、、、、
<nav>
</nav>
<div class="container">
<div class="wrapper row">
<div class="col-md-3 col-lg-3 left-side">
</div>
<div class="col-md-6 col-lg-6 middle-side">
</div>
<div
浏览 16提问于2020-04-20得票数 0
2回答
我正在学习HTML和CSS。我的<h3>文本不会对齐到页面的中心。我知道这与背景宽度为50%有关，但我需要这样做才能使页面有两种颜色。有办法绕过这事吗？
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-wid
浏览 3提问于2016-11-03得票数 0
回答已采纳
4回答
我是一个HTML/CSS初学者，我有一个关于<div>元素宽度的问题。
这是我的密码：
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(IMAGES/hero.jpg);
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.hero-text-box {
position: ab
浏览 0提问于2020-06-09得票数 1
我在我的网站上使用了以下代码
<p>
<script type="text/javascript">
// <
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
