Question

<!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即可实现这一目标？

Answer 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="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示例。检查类行，容器流体和容器here。

Answer 2

<!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而不用拧紧下面的内容。

Answer 3

这是使用视口完成此操作的一种方法：

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

如何使div填充视口而不是其父视口的宽度？

3 个答案: