How can I make a div fill the viewport instead of its parent's viewport's width?

Hao Wu 

<!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 turntable fill the entire viewport horizontally.

I don't want to use position: absolutecuz, it loses the height information of 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 two places. And I also don't want to detach it from the container as it should be inside the container.

So is there a better way where I just need to add some CSS .carouselto achieve this?

Maitree Kuria 

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

Hope this is what you are looking for! Also, if you want the content element to fill the entire viewport, you shouldn't constrain the container to a certain width, but resize the element as needed.

A new Codepen example has been created. Check the class line, container fluid and container here .

Related

How can I make a div fill the width of its parent?

database I want my divs( .give, .sep, ) to fill the width of .takeits parent( )..trade HTML code: <div class="trade"> <div class="give"></div> <div class="sep"></div> <div class="take"></div> </div> CSS code: .trade { position: relative; width: 90%;

How can I make a div fill the viewport with margins?

TMOTTM I'm working on CSS units and the box model. I'm looking for the easiest way to divfill the viewport (with some margin) using only normal CSS properties (without flexbox, grid) and not make it divlarger than the viewport (without scrollbars). div { wid

How can I make a div fill the viewport with margins?

TMOTTM I'm working on CSS units and the box model. I'm looking for the easiest way to divfill the viewport (with some margin) using only normal CSS properties (without flexbox, grid) and not make it divlarger than the viewport (without scrollbars). div { wid

How can I make a div fill the viewport with margins?

TMOTTM I'm working on CSS units and the box model. I'm looking for the easiest way to divfill the viewport (with some margin) using only normal CSS properties (without flexbox, grid) and not make it divlarger than the viewport (without scrollbars). div { wid

How can I get the width of the device (not the viewport)?

Riley Fitzpatrick I'm making my first website and my metalabels just define a constant width instead of taking the device width because I'm interested in CSS animations and want to avoid making it dynamic. Most of the content looks good on mobile, except for w

How can I get the width of the device (not the viewport)?

Riley Fitzpatrick I'm making my first website and my metalabels just define a constant width instead of taking the device width because I'm interested in CSS animations and want to avoid making it dynamic. Most of the content looks good on mobile, except for w