Question

最近我遇到了一个问题，我找不到任何合适的解决方案。

下面的图片概述了我想要实现的目标：

箭头所示的div是我找到解决方案的问题标记。问题是我想将div扩展到全屏。这个div在父div中，由于我无法将图像扩展到全屏，因此具有固定的宽度。

尝试过向父母提供溢出但无效。

我尝试过以下解决方案，该解决方案在某种程度上有效但需要可靠的解决方案。

width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;

有人可以为此提供一些解决方案吗？

Answer 1

html, body
    {width: 100%; height: 100%; overflow: hidden;}
    
    #parent{ 
        display: block;
        background-color: yellow;
        border: 1px solid red;
        position: fixed; 
        width: 200px; 
         height:100%;
    }
    #child1{ 
        background-color: red; 
         display: block;
      border: 1px solid yellow; 
        position: absolute; 
      width: 100vw;
  margin-left: calc(200px - 100%);
  //top:0px
    }

<div id="parent">parent with position: fixed 
    <div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>

Answer 2

如果我正确理解您的问题，则下面的代码段应该有用。将子div的宽度设置为100 vw 使div v iewport（窗口）的 w 宽度的100％。

另请注意，为了让孩子从视口左侧而不是父母的左侧开始，我给了孩子一个绝对位置和一个左边位置0.因为父母没有定位，所以从视口左侧开始孩子的左边（最近的祖先）。

＆＃13;

#parentDiv {
  width: 250px;
  height: 250px;
  margin: 0 auto;
  
  background-color: orange;
  border: 2px solid red;
}

#childDiv {
  /* 100vw is 100% of the viewport width. */
  width: 100vw;
  height: 50px;
  
  background-color: lightblue;
  box-sizing: border-box;
  border: 2px solid green;
  
  position: absolute;
  left: 0;
}

p {
  text-align: center;
}

＆＃13;

<html>
<body>

  <div id="parentDiv">
    <p>Parent</p>
    <div id="childDiv"><p>Child</p></div>
  </div>

</body>
</html>

＆＃13;

Answer 3

使用视口大小以覆盖整个页面（vw和vh）

  #first {
    width: 100px;
    height: 100px;
    background:gray; 
    position: fixed;
    top: 0;
    left: 0;

}
#second{
    width: 100vw;
    height: 100vh;
    background:blue;
    position:absolute;
    
}

   <div id="first">
  <div id="second">
  something
  </div>
</div>

将图像向左扩展，使其覆盖整个屏幕

3 个答案: