使绝对定位div扩大父div高度
正如你在下面的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具有dynamic高度，因为不同的子网站可以具有更多或更less的导航项目。
我知道绝对定位的元素从stream中被移除，因此被其他元素忽略。
我试图设置overflow:hidden; 对父母的div，但这并没有帮助，也没有clearfix。
我最后的手段将JavaScript来重新定位两个div相应，但现在我会试着看看是否存在一个非JavaScript的方式做到这一点。
你自己回答了这个问题：“我知道绝对定位的元素被从stream程中移除，因此被其他元素所忽略。 所以你不能根据绝对定位的元素设置父母的身高。
你要么使用固定的高度，要么需要涉及JS。
尽pipe伸展到position: absolute元素是不可能的，但通常有解决scheme可以避免绝对定位而获得相同的效果。 看看这个解决问题的小提琴在你的个案http://jsfiddle.net/gS9q7/
诀窍是通过浮动两个元素来反向元素顺序，第一个在右边，第二个在左边，所以第二个出现在第一个。
.child1 { width: calc(100% - 160px); float: right; } .child2 { width: 145px; float: left; }
最后，将一个clearfix添加到父级，然后完成（请参阅小提琴的完整解决scheme）。
通常，只要绝对位置的元素位于父元素的顶部，通过浮动元素就可以find解决方法。
Feela是正确的，但是如果你反转你的div定位，你可以得到一个父母div订约/扩展到一个子元素。 设置父div的position: absolute; 并使用left ， top和margin属性在浏览器中定位它，只要你喜欢它。 然后将child2设置为position: relative; 并设置overflow属性hidden的情况下，你想要填充或移动它左右使用top内部父div ，设置height: 100%; 和width: 100% ，这应该为你工作。
有一个相当简单的方法来解决这个问题。
你只需要在父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）即可。 相对的孩子仍然是不可见的，但会使父母的分母更高。
我有一个类似的问题。 为了解决这个问题（而不是使用正文，文档或窗口来计算iframe的高度），我创build了一个包装整个页面内容的div（例如，一个id为“page”的div），然后使用它的高度。
现在有更好的方法来做到这一点。 您可以使用底部属性。
.my-element { position: absolute; bottom: 30px; }
我想出了另一个解决scheme，我不喜欢，但完成了工作。
基本上复制子元素的方式，重复是不可见的。
<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; }
如果这些子元素包含小标记，那么影响将会很小。
这与@ChrisCbuild议的非常相似。 它不是使用绝对定位的元素，而是相对的元素。 也许可以为你工作
<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; }
试试这个，这对我很有用
.child { width: 100%; position: absolute; top: 0px; bottom: 0px; z-index: 1; }
它会将孩子的身高设置为父母身高
