Search code examples
htmlcsswidth

Set div width equal to window size


I have a container of width 1300 px. Inside the container i have other div.
I need to set the inner div width equal to browser window size eg) 1900px.
The content should be responsive to the window size.

My html code is like below:

<div class="container">
  <div class="content">Some style goes here </div>
</div>

Css:

.container {
   width: 1300px;
} 

.content{
  width: 100%
}`

Solution

  • If you have the div width in px format it wont be responsive. It has to be in % format. If you put the inner content as width:100% The inner content will have a width of the '.container'.
    So in order to get the inner div to be the window width you should have the .container to be equal to the window width.

    CSS:

    .container{
       width:100%;
    }
    

    Or if you want we can use jQuery:

     var w = $(window).width();
     $('.content').css('width', w);