如何使 div 元素宽度填满视口而非父元素？

Question

如何使 div 元素宽度填满视口而非父元素？

4

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Test</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
   <div class="container">
      <div class="carousel"></div>
      <div class="content"></div>
      <div class="content"></div>
   </div>
   <style>
      .container{
         max-width: 480px;
         margin: 0 auto;
      }

      .container .carousel{
         background-color: lightsalmon;
         height: 400px;
         width: 100%;
         /* Make the carousel's width fill the viewport */
      }

      .container .content{
         margin: 10px 0px;
         background-color: steelblue;
         height: 200px;
         width: 100%;
      }
   </style>
</body>

</html>

我有这样的问题。

我需要使走马灯在水平方向上填满整个视口。

我不想使用position: absolute，因为它会丢失其他元素的高度信息，所以我需要在容器中添加更多的css，如果我需要改变走马灯的高度，我需要修改两个地方。而且，我也不想将其从容器中分离，因为它应该在容器内部。

那么有没有更好的方法，只需要向.carousel添加一些css就可以实现这个目标呢？

- Hao Wu

3个回答

1

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="container">
    <div class="carousel"></div>
    <div class="placeholder"></div>
    <div class="content"></div>
    <div class="content"></div>
  </div>
  <style>
    .container {
      max-width: 480px;
      margin: 0 auto;
    }
    
    .container .placeholder,
    .container .carousel {
      height: 400px;
    }
    
    .container .carousel {
      background-color: lightsalmon;
      width: 100vw;
      position: absolute;
      left: 0;
    }
    
    .container .content {
      margin: 10px 0px;
      background-color: steelblue;
      height: 200px;
      width: 100%;
    }
  </style>
</body>

</html>

等一下，我想我找到了解决这个问题的方法。

在轮播下面添加一个占位符div，高度与轮播相同。

现在我可以将轮播设置为position: absolute，而不会破坏下方的内容。

- Hao Wu

0

以下是使用视口（Viewport）的一种实现方式：

<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>viewport</title>
      <style>
        body {
          margin: 0 auto; 
          padding:0px;
        }
        .layer {
          width: 100%;
          height: 100vh;
          color:#000;
          text-align:center;
        }
        p {
          margin: 0 auto;
        }
        .one {
          background-color: blue;
        }
        .two {
          background-color: yellow;
        }
      </style>
    </head>
    <body>
      <div>
        <div class="layer one">
          <p>layer one</p>
        </div>
        <div class="layer two">
            <p>layer two</p>
        </div>
      </div>
    </body>
</html>

- shades3002

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maitree Kuria · Accepted Answer

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Test</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
   <div class="container">
      <div class="carousel"></div>
      <div class="content"></div>
      <div class="content"></div>
   </div>
   <style>
       .container{
     width: 100%;
     margin: 0 auto;
  }

  .container .carousel{
     background-color: lightsalmon;
     height: 400px;
     width: 100%;
     margin-bottom: .5em;

     /* Make the carousel's width fill the viewport */
  }

  .container .content{
     margin: 10px 0px;
     background-color: steelblue;
     height: 200px;
     width: 100%;
    max-width: 30%;
    margin: 0 auto;
    margin-bottom: .5em;
  }
   </style>
</body>

</html>

希望这是您想要的内容！此外，如果您希望您的内容元素填充完整的视口，不要限制容器的宽度，而是根据需要调整元素大小。

我创建了一个新的Codepen示例。在这里检查类行、container-fluid和container here。