CODEWITHSUNDEEP
htmlcss
LucasSeveryn
LucasSeveryn

Reputation: 6262

How to make page take whole browser window?

I only recently started looking into bootstrap. I have created a very simple page, and I want it to take all of the window instead of just wrapping to content size. I am focusing on webkit browsers. I want the content to take 100% of the page height-wise and width-wise. Width is already done but I have trobules with taking 100% of height.

I tried the following solution from a similar question on Stack Overflow:

  html{
    min-height: 100%; /* real browsers */
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treated as min-height*/
  }
  body {
    background-color: #FFF;
    margin: 0;
    padding: 0;
    min-height: 100%; /* real browsers */
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treated as min-height*/
  }

But it has no effect.

This:

  html{
    height: 100%;
  }
  body {
    background-color: #FFF;
    height: 100%;
  }

Takes up too much space - it gets too tall and scrollbar appears.

What should I do to achieve my goal?

Full code is here: https://gist.github.com/LucasSeveryn/d1590bcafbf6e23b1239

Upvotes: 0

Views: 647

Answers (3)

Mitesh Vora
Mitesh Vora

Reputation: 458

I think the solution is use height: 100% with overflow: scroll property.

Upvotes: 1

Niek Nijland
Niek Nijland

Reputation: 772

You can also use jQuery

$(document).ready( function() {
    var windowHeight = $(window).height();
    $('body').height(windowHeight);
});

Upvotes: 0

ralph.m
ralph.m

Reputation: 14345

The key to 100% height is that you need a wrapper div around all of your content that is also set to min-height: 100%. Here is your code with the extra wrapper added in (I gave it a red background for demo purposes):

<!DOCTYPE html>
<html>
<head>
  <title>ActRecognitionWeb</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/backbone.js"></script>
    <script src="js/underscore.js"></script>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  <style type='text/css'>
  html{
    height: 100%;
  }
  body {
    background-color: #FFF;
    height: 100%;
    margin: 0; padding: 0;
  }

  .wrap {min-height: 100%; background: red;}

  #login-screen
  {
    background-image: url('img/login_background.jpg');
    padding-top: 40px;
    height: 100%;
    padding: 60px;
    padding-right: 200px;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
  }

  .container-fluid
  {
   padding-top: 40px;
   height: 100%;
   padding: 60px;
   padding-right: 200px;
   margin-bottom: 30px;
   font-size: 18px;
   font-weight: 200;
   line-height: 30px;
 }

 #login-sidebar
 {
  text-align: right;
  opacity:0.8;
  padding-top: 10%;

}
.navbar .brand
{
  padding-left: 30px;
}

h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
  color: inherit;
}

</style>
</head>
<body>
<div class="wrap">
  <div class="container">
    <div class='navbar navbar-inverse navbar-fixed-top'>
      <div class='navbar-inner' style="height: auto;" >
        <a class="brand" href="#">ActRecognition</a>
        <ul class="nav" data-bind="visible: loggedIn()">
          <li class="active"><a href="#">Summary</a></li>
          <li><a href="#">Challenges</a></li>
          <li><a href="#">Routes</a></li>
        </li>
      </ul>
      <ul class="nav pull-right" data-bind="visible: loggedIn()">
        <li class="dropdown" >
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span data-bind="text: userName"></span>
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Settings</a></li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#">Log Out</a></li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>
<script type='text/javascript' src='js/knockout-2.2.1.js'></script>
<script src='js/viewModel.js'></script>

</html>

There's a great nuts and bolts tutorial on this here:

http://www.sitepoint.com/forums/showthread.php?171943-CSS-FAQ-Tips-etc-Please-read-before-posting!&p=1243541#post1243541

with a simpler solution if you are just targeting IE8 and above.

Upvotes: 2

Related Questions