0

I am using bootstrap i have requirement where user is asking to make layout 100% height and width that should cover all the space on the page. I tried bootstrap class .container-fluid but its not working. Any idea what i am doing wrong in below code ?

index.html

 <div id="main-content" style="padding-bottom: 3rem;" ng-if="user">
    <div class="container-fluid">
        <breadcrumbs></breadcrumbs>
        <div ui-view></div>
    </div>
 </div>
aftab
  • 693
  • 1
  • 12
  • 27
  • I don't think there is a native class in Bootstrap that handles 100% height, and `.container-fluid` still has the 15px of padding on the right and left, so that's not truly 100%. You will likely need to use custom css to achieve this. – Tim Lewis Sep 29 '15 at 14:29
  • There isn't enough code here to duplicate the issue with the width. If I add borders to those divs, they use the entire width of the page. – BSMP Sep 29 '15 at 14:33
  • As for the height, the answer you want is here: http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space – BSMP Sep 29 '15 at 14:38
  • You should edit your question, so that It refers to height and not width. Bootstrap is always 100% width by default. – Lee Sep 29 '15 at 15:40

1 Answers1

-2

aftab Have a look at this Fiddle.
You can make a class and use vh and vw (height/width).

You will see the block class takes 50px away from the overall view port height for the height of the navbar. 

.block {
    height: calc(100vh - 50px); /* less 50px for the height of the Navbar */
    width: 100vw;
    background-color: darkorange;
}

Notice this fills the whole screen with no scroll bars. See if this helps you here.

Just have a read of this for browser support.

AngularJR
  • 2,752
  • 2
  • 16
  • 19
  • Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). Answers that are "barely more than a link to an external site” [may be deleted](http://stackoverflow.com/help/deleted-answers). – Quentin Sep 29 '15 at 15:08
  • @Quentin, still completing this post. So please do not be so quick to judge. I have made a complete working fiddle for this post. – AngularJR Sep 29 '15 at 15:12
  • 1
    Consider completing posts before you hit the "Post your answer" button. – Quentin Sep 29 '15 at 15:14