15ongm 15ongm - 5 months ago 7
HTML Question

How to make div extend to end of screen?

I used this post to make my

container
extend to the edge of the screen. However, there was still a white space (outlined in red):

enter image description here

So then I tried setting the
width
to
103.75%
. But as I make the screen smaller the white space reappears.

Is there a way to get the
container div
to fill that white space?

My code



HTML structure

<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-5 col-sm-4">
</div>
<div class="col-xs-7 col-sm-8">
<div class="container">
<div class="tab-content">
</div>
</div>
</div>
</div>
</div>


CSS

.container{
background-color: #86E1D8;
height: 100vh;
width: 100%;
}


JSFiddle

Answer

Create a no-padding class and add it to container-fluid and the col-sm-8 elements.

In the css add

.no-padding{padding: 0;}

See fiddle: https://jsfiddle.net/7ku7qvfx/1/