正如您在下面的CSS中看到的，我希望child2在child1之前定位自己。这是因为我正在开发的网站也应该在移动设备上运行，其中child2应该在底部，因为它包含我想要的导航，在移动设备上的内容之下。 - 为什么不是2个主页？这是在整个HTML中重新定位的唯一2个div，因此这个微小变化的2个主页是一种矫枉过正。
HTML：
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS：
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
child2具有动态高度，因为不同的子网站可以具有更多或更少的导航项。
我知道绝对定位元素已从流中移除，因此被其他元素忽略。
我尝试在父div上设置overflow:hidden;，但这没有帮助，clearfix也没有。
我的最后一招将是javascript来相应地重新定位两个div，但是现在我将尝试看看是否存在这样做的非javascript方式。
你自己回答了这个问题：“我知道绝对定位元素已从流中移除，因此被其他元素忽略。”因此，您无法根据绝对定位的元素设置父级高度。
你要么使用固定的高度，要么需要涉及JS。
现在有一种更好的方法可以做到这一点。您可以使用bottom属性。
.my-element {
position: absolute;
bottom: 30px;
}
这与@ChrisC建议的非常相似。它不使用绝对定位元素，而是使用相对元素。也许可以为你工作
<div class="container">
<div class="my-child"></div>
</div>
你的css是这样的：
.container{
background-color: red;
position: relative;
border: 1px solid black;
width: 100%;
}
.my-child{
position: relative;
top: 0;
left: 100%;
height: 100px;
width: 100px;
margin-left: -100px;
background-color: blue;
}
还要考虑下一个方法：
CSS：
.parent {
height: 100%;
}
.parent:after {
content: '';
display: block;
}
此外，因为你试图重新定位div考虑css网格
绝对视图将自己定位在非静态定位的最近祖先（position: static），因此如果您想要一个针对给定父级的绝对视图，请将父级position设置为relative，将子级设置为position至absolute
试试这个，它对我有用
.child {
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
z-index: 1;
}
它会将子高度设置为父高度
虽然不可能使用position: absolute拉伸到元素，但通常可以避免绝对定位同时获得相同效果的解决方案。看看这个小提琴解决了你的特殊情况http://jsfiddle.net/gS9q7/的问题
诀窍是通过浮动两个元素来反转元素顺序，第一个向右，第二个向左，所以第二个首先出现。
.child1 {
width: calc(100% - 160px);
float: right;
}
.child2 {
width: 145px;
float: left;
}
最后，向父级添加一个clearfix并完成（请参阅fiddle获取完整的解决方案）。
通常，只要具有绝对位置的元素位于父元素的顶部，通过浮动元素就可以找到解决方法。
Feeela是正确的，但如果你反转你的div定位，你可以让父母div收缩/扩展到子元素：
.parent{
postion: absolute;
/* position it in the browser using the `left`, `top` and `margin`
attributes */
}
.child{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
/* to pad or move it around using `left` and `top` inside the parent */
}
这应该适合你。
有一种非常简单的方法可以解决这个问题。
您只需要在父div中使用display：none复制相对div中child1和child2的内容。说child1_1和child2_2。将child2_2放在最顶层，将child1_1放在底部。
当你的jquery（或其他）调用绝对div时，只需使用display：block AND visibility：hidden设置相应的div（child1_1或child2_2）。相对的孩子仍然是隐形的，但会使父母的div更高。
我遇到了类似的问题。为了解决这个问题（而不是使用正文，文档或窗口来计算iframe的高度），我创建了一个包装整个页面内容的div（例如一个id =“page”的div），然后我使用了它的高度。
有一个非常简单的黑客可以解决这个问题
这是一个代码解决方案：https://codesandbox.io/s/00w06z1n5l
HTML
<div id="parent">
<div class="hack">
<div class="child">
</div>
</div>
</div>
CSS
.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }
你可以玩hack div的定位来影响孩子自己定位的位置。
这是一个片段：
html {
font-family: sans-serif;
text-align: center;
}
.container {
border: 2px solid gray;
height: 400px;
display: flex;
flex-direction: column;
}
.stuff-the-middle {
background: papayawhip
url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
flex: 1;
}
.parent {
background: palevioletred;
position: relative;
}
.hack {
position: absolute;
left: 0;
top:0;
right: 0;
}
.child {
height: 40px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
left: 0;
right: 0;
} <div class="container">
<div class="stuff-the-middle">
I have stuff annoyingly in th emiddle
</div>
<div class="parent">
<div class="hack">
<div class="child">
I'm inside of my parent but absolutely on top
</div>
</div>
I'm the parent
<br /> You can modify my height
<br /> and my child is always on top
<br /> absolutely on top
<br /> try removing this text
</div>
</div>使用纯JavaScript，您只需要使用static position方法检索.child1子元素getComputedStyle()的高度，然后使用padding-top属性将该值设置为同一个孩子的HTMLElement.style。
检查并运行以下代码片段，以获取上述内容的实际示例：
/* JavaScript */
var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");
var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;/* CSS */
#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }<!-- HTML -->
<div id="parent">
<div class="child1">STATIC</div>
<div class="child2">ABSOLUTE</div>
</div>我提出了另一个解决方案，我不喜欢这个解决方案，但完成了工作。
基本上复制子元素，使重复项不可见。
<div id="parent">
<div class="width-calc">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS：
.width-calc {
height: 0;
overflow: hidden;
}
如果这些子元素包含很少的标记，则影响将很小。
“你要么使用固定的高度，要么需要涉及JS。”
这是JS的例子：
---------- jQuery JS示例--------------------
function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();
$(containerSelector).children().each(function (i){
if (maxX < parseInt($(this).css('left')) + $(this).width()){
maxX = parseInt($(this).css('left')) + $(this).width();
}
if (maxY < parseInt($(this).css('top')) + $(this).height()){
maxY = parseInt($(this).css('top')) + $(this).height();
}
});
return {
'width': maxX,
'height': maxY
}
}
var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
$("#SpecBody").width(specBodySize.width);
$("#SpecBody").height(specBodySize.height);