CSS how to fit 100% height and width? - css

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?

Answer 1

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/

Answer 2

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;
}

Answer 3

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.

Answer 4

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>

Answer 5

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