blocks|key|494690|text|您自己回答了这个问题：“我知道绝对定位的元素会从流中删除，因此会被其他元素忽略。”所以你不能根据一个绝对定位的元素来设置父元素的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|494691|您可以使用固定高度，也可以使用JS。|494692|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>You answered the question by yourself: "I know that absolute positioned elements are removed from the flow, thus ignored by other elements." So you can't set the parents height according to an absolutely positioned element.</p>

<p>You either use fixed heights or you need to involve JS.</p>


blocks|key|277913|text|我也遇到过类似的问题。为了解决这个问题(而不是使用body、document或window来计算iframe的高度)，我创建了一个包装整个页面内容的div+(例如，一个带有id=“页面”的div+)，然后我使用它的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|277914|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I had a similar problem.
To solve this (instead of calculate the iframe's height using the body, document or window) I created a div that wraps the whole page content (a div with an id="page" for example) and then I used  its height.</p>


blocks|key|494865|text|这与@ChrisC的建议非常相似。它使用的不是绝对定位元素，而是相对定位元素。也许可以为你工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|494866|<div+class="container">
++<div+class="my-child"></div>
</div>|code-block|syntax|javascript|494867|你的css是这样的：|494868|.container{
++++background-color:+red;
++++position:+relative;
++++border:+1px+solid+black;
++++width:+100%25;
}

.my-child{
++++position:+relative;
++++top:+0;
++++left:+100%25;
++++height:+100px;
++++width:+100px;
++++margin-left:+-100px;
++++background-color:+blue;
}|494869|https://jsfiddle.net/royriojas/dndjwa6t/|offset|length|494870|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>This is very similar to what @ChrisC suggested. It is not using an absolute positioned element, but a relative one. Maybe could work for you </p>

<pre><code>&lt;div class="container"&gt;
  &lt;div class="my-child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And your css like this:</p>

<pre><code>.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;
}
</code></pre>

<p><a href="https://jsfiddle.net/royriojas/dndjwa6t/" rel="nofollow">https://jsfiddle.net/royriojas/dndjwa6t/</a></p>


blocks|key|278033|text|现在有一个更好的方法来做这件事。您可以使用bottom属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|278034|++++.my-element+{
++++++position:+absolute;
++++++bottom:+30px;
++++}|code-block|syntax|javascript|278035|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>There is a better way to do this now.  You can use the bottom property.</p>

<pre><code>    .my-element {
      position: absolute;
      bottom: 30px;
    }
</code></pre>


blocks|key|278136|text|我想出了另一个解决方案，虽然我不喜欢这个方案，但还是完成了工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|278137|基本上，复制子元素的方式是复制子元素不可见。|278138|<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>|code-block|syntax|javascript|278139|CSS：|278140|.width-calc+{
++++height:+0;
++++overflow:+hidden;
}|278141|如果这些子元素包含很少的标记，那么影响将很小。|278142|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I came up with another solution, which I don't love but gets the job done.</p>

<p>Basically duplicate the child elements in such a way that the duplicates are not visible.</p>

<pre><code>&lt;div id="parent"&gt;
    &lt;div class="width-calc"&gt;
        &lt;div class="child1"&gt;&lt;/div&gt;
        &lt;div class="child2"&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="child1"&gt;&lt;/div&gt;
    &lt;div class="child2"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.width-calc {
    height: 0;
    overflow: hidden;
}
</code></pre>

<p>If those child elements contain little markup, then the impact will be small.</p>


blocks|key|278198|text|有一个非常简单的方法来解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|278199|您只需在相对div中复制child1和child2的内容，并在父div中使用display:none。说child1_1和child2_2。把child2_2放在上面，把child1_1放在下面。|278200|当你的jquery+(或其他什么)调用绝对div时，只需用display:block和visibility:hidden设置相应的相对div+(child1_1或child2_2)即可。相对子对象仍然不可见，但会使父对象的div更高。|278201|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>There is a quite simple way to solve this.</p>

<p>You just have to duplicate the content of child1 and child2 in relative divs with display:none in parent div. Say child1_1 and child2_2. Put child2_2 on top and child1_1 at the bottom.</p>

<p>When your jquery (or whatever) calls the absolute div, just set the according relative div (child1_1 or child2_2) with display:block AND visibility:hidden. The relative child will still be invisible but will make parent's div higher.</p>


blocks|key|495158|text|试试这个，它对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|495159|.child+{
++++width:+100%25;
++++position:+absolute;
++++top:+0px;
++++bottom:+0px;
++++z-index:+1;
}|code-block|syntax|javascript|495160|它会将子高度设置为父高度|495161|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try this, it was worked for me</p>

<pre><code>.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}
</code></pre>

<p>It will set child height to parent height</p>


blocks|key|495195|text|还要考虑下一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|495196|CSS：|495197|.parent+{
++height:+100%25;
}
.parent:after+{
++content:+'';
++display:+block;
}|code-block|syntax|javascript|495198|另外，由于您正在尝试重新定位div，因此请考虑css网格|495199|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Also consider next approach:</p>

<p>CSS: </p>

<pre><code>.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}
</code></pre>

<p>Also since you are trying to reposition divs consider css grid</p>


blocks|key|495238|text|绝对视图将自身定位为非静态定位的最近祖先(position:+static)，因此，如果希望绝对视图定位于给定的父视图，请将父position设置为relative，将子视图设置为position到absolute|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|495239|entityMap^0|L|G|1R|8|22|8|2I|8|2R|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

<p>Absolute views position themselves against the nearest ancestor that isn't statically positioned (<code>position: static</code>), therefore if you want an absolute view positioned against a given parent, set the parent <code>position</code> to <code>relative</code> and the child to <code>position</code> to <code>absolute</code></p>


<p>As you can see in the CSS below, I want <code>child2</code> to position itself before <code>child1</code>. This is because the site I'm currently developing should also work on mobile devices, on which the <code>child2</code> should be at the bottom, as it contains the navigation which I want below the content on the mobile devices. - Why not 2 masterpages? This is the only 2 <code>divs</code> which are repositioned in the entire HTML, so 2 masterpages for this minor change is an overkill.</p>

<p>HTML:</p>

<pre><code>&lt;div id="parent"&gt;
    &lt;div class="child1"&gt;&lt;/div&gt;
    &lt;div class="child2"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
</code></pre>

<p><code>child2</code> has dynamic height, as different subsites could have more or less navigation items.</p>

<p>I know that absolute positioned elements are removed from the flow, thus ignored by other elements.<br>
I tried setting <code>overflow:hidden;</code> on the parent div, but that didn't help, neither does the <code>clearfix</code>.</p>

<p>My last resort will be JavaScript to reposition the two <code>divs</code> accordingly, but for now I'll try and see if there exist a non-JavaScript way of doing this.</p>


Make absolute positioned div expand parent div height

正如你在下面的CSS中看到的，我希望child2定位在child1之前。这是因为我目前正在开发的网站也应该在移动设备上工作，在移动设备上，child2应该在底部，因为它包含了我想要的在移动设备内容下面的导航。-为什么不是2个母版页？这是在整个divs中仅有的2个重新定位的页面，所以2个母版页对于这个微小的更改来说是多余...

问使绝对定位div扩展父div高度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使绝对定位div扩展父div高度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使绝对定位div扩展父div高度
EN