我有不同的場景。內部有三個不同的div。第一個div有position:relative，第二個div有它的position:aboslute現在我怎麼能用全寬和全高來伸展第三個div？如何在相對和絕對div內設置全寬和全高div
DIV1：positon:relative; width:50px; height:50px;
DIV2：postion:absolute; width:50px; height:50px;
DIV3：postion:absolute; width:100%; height:100%; // It's not working
<div class="div1">
<div class="div2">
<div class="div3">
<!-- I need div3 with full width and full height -->
</div>
</div>
</div>
爲什麼.div3需要成爲別人的孩子？有沒有更好的做法：
<div class="div1">
<div class="div2"></div>
</div>
<div class="div3"></div>
？
如果沒有，
.div3 {
position: absolute;
height: 100vh;
width: 100vw;
}
解決問題了嗎？
設定高度到第一relative DIV第二和另一個width 100% , height 100%檢查與該片斷
.div1 {
\t position:relative;
\t height:300px;
\t width:100%;
}
.div2 {
\t position:absolute;
\t height:100%;
\t left:0;
\t width:50%;
\t background:#999;
}
.div3 {
\t position:absolute;
\t height:100%;
\t width:50%;
\t right:0;
\t background:#CCC;
}<div class="div1">
<div class="div2">
<div class="div3">
<!-- I need div3 with full width and full height -->
</div>
</div>
</div>body, html{
height:100%;
width:100%;
margin:0px;
padding:0px;
}
.div1{
height:50px;
width:50px;
position:relative;
background:green;
}
.div2{
height:50px;
width:50px;
position:absolute;
background:gold;
}
.div3{
height:100vh;
width:100vw;
position:absolute;
background:gray;
}<div class="div1">
<div class="div2">
<div class="div3">
<!-- I need div3 with full width and full height -->
</div>
</div>
</div>對上述溶液
看看如果'div1'和'div2'的寬度和hegith的寬度很小，它將如何工作？ – UFFAN
其實你沒有提到第一個和第二個div的寬度和高度。但沒有問題，我已根據您的代碼做了一些更改！看看 –
現在我認爲它是okey，因爲你想要http://codepen.io/santoshkhalse/pen/XNqBpq –
HTML + CSS無法做到。它打破了規則。如果您需要3大於2或1. 您可以使用javascript存檔該結果。
HTML
<div class="div1">
<div class="div2">
<div class="div3">
<!-- I need div3 with full width and full height -->
</div>
</div>
</div>
CSS
.div1 {
position: relative;
width: 350px;
height: 350px;
background-color: blue;
}
.div2 {
position: absolute;
width: 250px;
height: 250px;
background-color: red;
left: 50px;
top: 50px;
}
.div3 {
position: absolute;
background-color: green;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
JQUERY JS
$('.div3').detach().insertAfter('.div1');
你.div2可以在頁面的任何和你仍然想。 DIV3視口的全寬和全高...位於屏幕/視口左上角的左上角我猜（覆蓋圖）？否則，它的很大一部分將在視口右側（和底部下方）之外隱藏。
然後可以使用VH和大衆單元，其是相對於視不論其父母的規模和position: fixed移動它相對於視，因爲你不知道在哪裏.div2是和更多它是無關緊要的。這裏有一個片段：
.div1 {
position:relative; width:50px; height:50px;
margin: 50px 0 0 70px;
padding: 2rem;
background-color: tomato;
}
.div2 {
position: absolute;
width:50px;
height:50px;
background-color: yellow;
}
.div3 {
position: fixed;
top: 0;
left: 0;
width:100vw;
height:100vh;
background-color: rgba(128, 128, 128, 0.7);
}
.div3:after {
content: 'right bottom';
position: absolute;
bottom:0; right: 0;
padding: 1rem;
background-color: lightblue;
}<div class="div1">
<div class="div2">
In the page, somewhere
<div class="div3">
<!-- I need div3 with full width and full height -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio harum quaerat accusantium ex aliquid, quia, velit saepe quisquam iure! Nobis quam asperiores saepe, in voluptatem et, harum minima a necessitatibus.
</div>
</div>
</div>
'位置：fixed'會解決，如果你不希望3次DIV與頁面滾動，但如果你想要的話，是div 1和div 2的左/頂位置是否已知？ ...如果不是，你需要一個腳本，如果是的話，讓我知道如何知道，我發佈一個，如果不是給定已經顯示如何 – LGSon
如果div 1居中，垂直和水平和第2格也是如此，這也算作已知其位置。 – LGSon