Question

我希望在不移动DOM中的元素的情况下最大化div到整个窗口的宽度和高度（或另一个父div）。这只能用CSS吗？

<div id="parent1" class="fullwidth"> 
    <div id="parent2" class="notfullwidth">
         <div style="position:absolute">mycontent</div><!-- make this full width of parent1/overlay parent1 -->
    </div>
</div>

Answer 1

是的，可以通过设置#parent1，relative来定位absolute top并扩展right定位的大孩子， bottom和left属性0。

＆＃13;

#parent1 {
  position: relative;
  background-color: gold;
}

#parent2 {
  width: 70%;
  margin: 0 auto;
  min-height: 100px;
  border: 1px solid gray;
}

.grand-child {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: rgba(255, 30, 0, .5);
}

＆＃13;

<div id="parent1" class="fullwidth"> 
    <div id="parent2" class="notfullwidth">
         <div class="grand-child">mycontent</div><!-- make this full width of parent1/overlay parent1 -->
    </div>
</div>

＆＃13;

Answer 2

如果父级没有相对位置，则子级可以扩展到相对于窗口的全宽度/高度。

#mycontent {
 background-color: green;
 position: absolute;
 width: 100%;
 top: 0;
 left: 0;
 height: 100%;
}

如果parent1具有相对位置，则子项将扩展为父最大宽度＆amp;最大高度。

#parent1 {
 position: relative;
 width: 300px;
 height: 300px;
}
#mycontent {
 background-color: green;
 position: absolute;
 width: 100%;
 top: 0;
 left: 0;
 height: 100%;
}

无需移动DOM即可最大化Div

2 个答案: