CSS how to fit 100% height and width?

Question

I am creating a landing page with HTML/CSS and using a little bit of bootstrap. I am having trouble resizing my main page to fit 100% height and width when the page is opened.

I want it to look like google docs' main page: https://www.google.com/docs/about/. If you go there, you'll see:

the nav is in fixed position and follows you everywhere. I got that part down.
The main image automatically resizes depending on your screen size. The icon-arrow-hint (the arrow on mid-bottom of page) can always be seen on the bottom of the image.

Two problems that I have:

Got this weird gap on the right side even though I set right: 0.

After page load, it looks like it fits about 90% of the height and I still need to scroll down. I placed this text on the bottom - theoretically, this should be shown on the bottom of the screen without scrolling, but I have to always scroll slightly down.

This is the JSfiddle: https://jsfiddle.net/iggyfiddle/DTcHh/35435/

I am using position: absolute and I 0-ed all 4 sides.

How can I fit the yellow div 100% height and 100% width like the google page nicely?

For the width issue, just set the body's margin and padding to 0. I changed it in your fiddle and it worked for the content going full width — SidTheBeard, Jul 25 '17 at 21:54

Michael Benjamin · Accepted Answer · 2017-07-26T11:45:35.297

If you give an element height: 100%, but there's another element above or below in the same container, you need to adjust for the height of the other element, otherwise there will be an overflow.

Also, adjust for the -15px horizontal margins applied by Bootstrap.

Try this:

.primary-content {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 90%;          /* ADJUSTMENT */
    background: yellow;
    margin: 0;            /* NEW */
}

https://jsfiddle.net/DTcHh/35437/

score 1 · Answer 2 · answered Jul 25 '17 at 19:14

Your .primary-content div has the bootstrap .row class on it which declares negative horizontal margins. A solution would be to remove the .row class from your div or to override the margins in css.

These are the default bootstrap .row styles:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

Sumner Evans · Answer 3 · 2017-07-25T19:21:09.650

The reason that your yellow div is going too far is that you need to set the height to 90%.

To fix the weird padding on the right side, add margin: 0 !important;.

.primary-content {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%; // change this
  background: yellow;
  margin: 0 !important; // add this
}

See this JSFiddle or run the snippet below

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.universal-header {
  background: red;
  border-radius: none;
  height: 10%;
  width: 100%;
  position: fixed;
}

.color-brown {
  color: #58482C;
  text-decoration: none;
}

.primary-content {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  background: yellow;
  margin: 0 !important;
}

.bottom {
  position: absolute;
  bottom: 0;
  right: 0;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar universal-header navbar-static-top">

<a class="navbar-brand navigation-title color-brown">

  </a>
  <span class="color-brown navbar-brand navigation-title">HELLO</span>
  
  <span class="navbar-brand navigation-title pull-right color-brown">Login</span>
    <span class="navbar-brand navigation-title pull-right color-brown">Features</span>
    <span class="navbar-brand navigation-title pull-right color-brown">About</span>
</nav>

<div class="row primary-content">
  <div class="col-md-12">
    <h1>This is a super awesome product</h1>
    <h4>Help me stackoverflow, you are my only hope!</h4>
  </div>
  <div class="bottom">
    You should be able to see me without scrolling
  </div>
</div>

score 1 · Answer 4 · answered Jul 25 '17 at 19:16

Using the class of .row adds a margin of 15px. A quick fix is to remove the class from primary-content div like so.

    <div class="primary-content">
  <div class="col-md-12">
    <h1>This is a super awesome product</h1>
    <h4>Help me stackoverflow, you are my only hope!</h4>
  </div>

or add a class and remove the margins.

Carlos Valencia · Answer 5 · 2017-07-26T15:09:43.190

0

Problem 1:

Got this weird gap on the right side

When using bootstrap's row class it will add a margin of -15px to the left and right of your div, see the second answer to this question if you want to understand better why.

Solution: don't use the row class for your primary-content div.

Problem 2:

this should be shown on the bottom of the screen without scrolling, but I have to always scroll slightly down

you are using absolute positioning, remember that needs a relative positioned parent container, in your case, since you don't have any, everything is relative to the initial containing block, hence your viewport/window.

Quick fix: delete the height: 100%; css from .primary-content

Warning: using absolute positioning the way you are right now will bring you trouble if you want to add more content below your yellow container

edited Jul 26 '17 at 15:09

answered Jul 25 '17 at 19:38

Carlos Valencia

6,499
2
29
44

With no positioned ancestor, an absolutely positioned element is *not* relative to the `body` element. It's relative to the *initial containing block*, which would be the root element / viewport. http://www.w3.org/TR/CSS22/visuren.html#comp-abspos – Michael Benjamin Jul 26 '17 at 01:23
And it doesn't have to be `relative` positioning. Any positioning scheme other than `static` (the default) can set the bounding box ;-) – Michael Benjamin Jul 26 '17 at 15:14

CSS how to fit 100% height and width?

5 Answers5