everytime i create an html file, and tell it to be height 100%, it never fills the page 100% but rather the content.
I normally create a div wrapper, inside of this div is were all the magic is created. I always set the div to 100% both width and height. I also place a few tags to fill the content, but when i place a border, i réalise that the content is not 100% the width and Height of the window.
I know i can force it using javascript but i want to be able to support pages that dont have javascript enabled.
100% height is not very straightforward in CSS, though there are well-established methods. See this post (and read the whole topic for good measure): Html, body questions - #10 by PaulOB
If after reading the link Ralph gave above you are still stuck then give an example of what you are trying to do and we can suggest ways to approach it.
Without a complete understanding off how height:100% works and its implications you will head off in the wrong direction. It sounds like you should probably be using display:table and table-cell methods instead (or flexbox for modern browsers).
The whole idea behind this is because i want to make a navigation bar but rather than horizontal, i want it vertical. I’m trying to set the whole height of the navigation bar to be 100% the height of the container (or body). But it never does that for me. It only sets the height to that of the current content thats been used. I will try to upload some images and the bit of code i have as soon as i can.
You need to read the link that Ralph gave above again because this is all explained clearly and in detail in that thread.
To recap you simply cannot give elements height:100% willy nilly because it means nothing in most cases. If the parent of the element is height:auto (the default) then there is nothing to base the height on so the height:100% becomes height:auto. To use height:100% you need an unbroken chain right back to html of 100% heights applied and even if you do that then your layout can never grow taller than the viewport because you have capped it at 100%.
The simplest way to get the full viewport heights is to use display:table and display:table-cell so that cells always match height of each other (as tables always do) and then you set html and body to height:100% and the table to height:100%. Tables treat height as a minimum which will allow the 100% to grow if content is greater unlike normal elements (apart from flex items).
Here is an example to using display:table/cell for a full height side column.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
margin:0;
padding:0;
height:100%
}
body {background:#ccc;}
.wrap {
display:table;
width:100%;
max-width:980px;
margin:auto;
border-collapse:collapse;
table-layout:fixed;
height:100%;/* we can use 100% here in stead of min-height because display:table always treats height as a minimum and will automatically accomodate content*/
}
.sidebar {
width:300px;
background:#666;
color:#fff;
}
.main{background:#333;color:#fff;}
.tc {
display:table-cell;
vertical-align:top;
padding:10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar tc">Sidebar</div>
<div class="main tc">Main content</div>
</div>
</body>
</html>
For modern browsers you could also use flexbox to do this combined with the vh units to get a 100% height.
