Question

我有一个不同的场景。彼此之间有三个不同的div。第一个div有position:relative，第二个div有position:aboslute现在我怎么能伸展全宽和全高的第三个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>

Answer 1

为什么.div3需要成为其他人的孩子？如果不是更好：

<div class="div1">
    <div class="div2"></div>
</div>

<div class="div3"></div>

如果没有，

.div3 {
    position: absolute;
    height: 100vh;
    width: 100vw;
}

解决你的问题？

Answer 2

将高度设置为第一个relative div秒，另一个width 100% , height 100%使用此代码段进行检查

＆＃13;

.div1 {
	position:relative;
	height:300px;
	width:100%;
}
.div2 {
	position:absolute;
	height:100%;
	left:0;
	width:50%;
	background:#999;
}
.div3 {
	position:absolute;
	height:100%;
	width:50%;
	right:0;
	background:#CCC;
}

＆＃13;

<div class="div1">
   <div class="div2">
      <div class="div3">
         <!-- I need div3 with full width and full height -->
      </div>
   </div>
</div>

＆＃13;

Answer 3

＆＃13;

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;
}

＆＃13;

<div class="div1">
   <div class="div2">
      <div class="div3">
         <!-- I need div3 with full width and full height -->
      </div>
   </div>
</div>

＆＃13;

看看上面的解决方案

Answer 4

HTML + CSS无法做到。它打破了规则。如果你需要3大于2或1。您可以使用javascript归档该结果。

check the example

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');

Answer 5

您的.div2可能位于页面的任何位置，您仍然需要.div3全宽和视口的全高...左上角位于屏幕/视口的左上角我想（一个叠加层））？否则，它的大部分将在视口右侧（并在底部下方）不可见。

然后，您可以使用 vh 和 vw 单位，这些单位相对于视口而言，无论其父级大小如何， 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>

如何在相对和绝对div内设置全宽和全高div

5 个答案: