Can I give 100% height to all my containers starting from html?
I have a sticky header and a sticky footer on my web page. In between these 2, content is dynamically generated. But if the content is smaller than the screen or the height of the device, it looks strange (having a space on a white background). what do i do if i want my page to look full? Give height 100% in html, body, each container solves my problem! But is this a standard? Can we use it like that? Please provide me with a better approach. My webpage should look the same for every device. Even less content, the background image cover should take up the entire device screen as my footer is stuck in a bottle.
.header{
position:fixed;
top:0;
height:60px;
}
.content{
margin-top:60px;
padding:5px;
margin-bottom:60px;
background-image:url("dummy.png");
}
.footer{
position:fixed;
bottom:0;
height:60px;
}
Initially I didn't provide any CSS for html, body and wrapper division.But if my content is too small (let's say I have two paragraphs from a JSON file). So my background image does not fill up to the whole (Even if the content is smaller, I want this to be filled with the whole screen so that my web page looks the same on every device).
For this problem:
html{
height:100%;
}
body{
height:100%;
}
content{
height:100%;
}
If I like it, it looks like it solved my problem. But is this the standard? Is it correct? Will there be this effect in the future?
source to share
Hope this suits your requirements.
<html>
<!--
"position: fixed": Is not supported in elder iOS/Safari and a fare range of mobile devices.
"margin-top/bottom": Has know issues in IE8/7.
If you want your website to support IE8+, Safari, iOS (5.1+)[iPhone 4+], Chrome, FireFox, Opera and some old Mac IE you need to fall back to a good old fashioned wrapping div.
-> Tested in FireFox 36.0.1, Opera 30, iPhone 4 + 5, iPad iOS 5.1, IE8, IE9, IE11 and Chrome 43.0.2357.124.
-->
<head>
<style>
/* Not much sense to style those as class, sincen they are going to be unique */
html, body{height: 100%}
body{
margin: 0px;
overflow: hidden; /* We scroll in the content div */
}
div{
display: block;
margin: 0px;
padding: 0px;
position: relative;
}
#header{
background:red;
height: 60px;
position: absolute;
right: 0px;
top: 0px;
width: 100%;
z-index: 11;
}
#footer{
background:pink;
bottom: 0px;
height: 60px;
position: absolute;
right: 0px;
width: 100%;
z-index: 10;
}
#contentWrapper{
background: crimson;
box-sizing: border-box;
height: 100%;
overflow: hidden;
padding: 60px 0px 60px 0px; /* Padding is less bugged than margin in IE8 and old mac IE */
width: 100%;
z-index: 1;
}
#content{
background: orange;
background-image: url(https://www.google.ch/images/srpr/logo11w.png);
background-size: cover;
/*background-image:url("dummy.png");*/
height: 100%;
overflow: auto;
width: 100%;
}
</style>
<script>
//Remove this on your live test :p
function fakeContent(){
var tE = document.getElementById('content');
for(var i=0;i<300;i++) tE.innerHTML += ' content' + i.toString();
}
</script>
</head>
<body onload = 'fakeContent()'>
<div id = 'header'>Header</div>
<div id = 'contentWrapper'>
<div id = 'content'>Content</div>
</div>
<div id = 'footer'>Footer</div>
</body>
</html>
source to share