CODEWITHSUNDEEP
htmlcsslayout
Hao Wu
Hao Wu

Reputation: 20699

How to make a div fill the width of the viewport instead of its parent?

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

I have this kind of problem.

I need to make the carousel fill the entire viewport horizontally.

I don't want to use position: absolute cuz it will lose the height info to other elements, so I need to add more css to the container and if I need to change the height of the carousel, I need to modify both places. And I don't want to detach it from container as well cuz it suppose to be inside of the container.

So is there better a way that I only need to add some css to .carousel to achieve this?

Upvotes: 5

Views: 9706

Answers (3)

shades3002
shades3002

Reputation: 1001

This is one way to do it using 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>

Upvotes: 0

Hao Wu
Hao Wu

Reputation: 20699

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

Wait, I think I figured out a way to solve this.

By adding a placeholder div below the carousel sharing the same height.

Now I can make the carousel position: absolute without screwing up the contents below.

Upvotes: 1

Maitree Kuria
Maitree Kuria

Reputation: 72

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

I hope this is what you are looking for! Also, you should not limit your container to certain width if you want your content elements to fill the complete view port, instead resize you elements as per the need.

Have created a new codepen sample. Check classes row, container-fluid and container here.

Upvotes: 4

Related Questions