Sticky footer

dotJoon · April 1, 2014, 6:16am

I have a web page at http://dot.kr/x-test/joonHo/layOut/autoHeight02.php.
Because there are many line breaks in the contents, the sticky footer is not shown when the page is loading.
if you down the scroll bar, the sticky footer will be shown at the bottom of the browser.

I like to make it like the follow.
(1) When the page is loading, the stick footer is shown on the bottom of the browser and the low part of the contents is not shown because there are many line breaks in the contents.
(2) if you down the scroll bar, the low part of the contents will be shown but the sticky footer is always on the bottom of the browser.

You can see what I want at http://dot.kr/x-test/joonHo/layOut/stick01.php.
But at the sticky01.php the header contents is not fluid height.
I like to get the Header contents is fluid height and the sticky footer is always shown on the bottom of the browser not only the dynamic contents is long or short but you also read the low part of the contents.

ronpat · April 1, 2014, 9:13am

dotJoon,

Do you have any objection to using JavaScript?

This could be easily done with a couple of short JavaScripts. Let JavaScript set the padding-top and padding-bottom of #content_container to match the height of #header_container and #footer_container respectively.

This is your code slightly modified in case a JS person wants to give it a go.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sticky Header and Footer</title>
    <style type="text/css">
*, *:before, *:after {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    background:#eff;
    padding:0;
    margin:0;
} 
#header_container {
    width:100%;
    min-height:60px;  /* */
    border:1px solid #666;
    position:fixed;
    left:0;
    top:0;
    background:#eee;
}
#header {
    width:100%;
    line-height:60px;  /* */
    text-align:center;
    margin:0 auto;
}
#content_container {
    width:100%;
    overflow:auto;
    padding-top:60px;  /* actual value dynamically set by JS = height of #header_container */
    padding-bottom:60px;  /* actual value dynamically set by JS = height of #footer_container */
    margin:0 auto;
}
#footer_container {
    width:100%;
    min-height:60px;  /* */
    border:1px solid #666;
    position:fixed;
    bottom:0;
    left:0;
    background:#eee;
}
#footer {
    line-height:60px;
    text-align:center;
    margin:0 auto;
}
</style>
</head>
<body>

<div id="header_container">
    <div id="header">
        Header Content
    </div>
</div>
<div id="content_container">
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
contents<br>
</div>
<div id="footer_container">
    <div id="footer">
        Footer Content
    </div>
</div>
</body>
</html>

PaulOB · April 1, 2014, 11:55am

Hi,

That’s the problem with fixed elements and you have to account for them being in the way of other content. For a fluid header and footer then fixed positioning is not the best idea and you would need to script it to allow it to work in a fluid manner.

You also have to remember that if you have any fixed width elements in the fixed footer that cause an overflow then you won’t be able to reach them via the window scrollbars and you would need scrollbars on the fixed elements themselves which starts to look messy.

As an exercise only you could do something with flexbox but the scrollbar is maintained on the main content rather than the window.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	display: flex;
	height: 100vh;
	flex-direction: column;
}
.content {
	flex: 1;
	overflow:auto;
}
main.content { background:blue }
header, footer { background:red; }
p { margin:1em }
</style>
</head>

<body>
<header>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
</header>
<main class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
</main>
<footer>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id mauris eu nulla feugiat sagittis nec vel nulla. Suspendisse lobortis, augue at ornare tincidunt, dui erat ultrices eros, sed convallis sapien orci convallis felis. Curabitur nec sapien arcu. Ut molestie gravida facilisis. Proin pharetra varius consectetur. Nullam adipiscing felis a elit pulvinar dignissim. Nam tempor adipiscing elit non varius. </p>
</footer>
</body>
</html>

I suppose you could set up some judicial media queries for your fixed height header/footer and anticipate that the height may be increased at smaller widths. If the content in the header and footer is always the same then you should be able to increase the height of the footer at certain breakpoints and change the padding as shown in Ron’s example.

roughly like this:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sticky Header and Footer</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
#header_container {
	background:#eee;
	border:1px solid #666;
	height:60px;
	left:0;
	position:fixed;
	width:100%;
	top:0;
}
#header {
	margin:0 auto;
	max-width:940px;
	text-align:center;
}
#content_container {
	margin:0 auto;
	overflow:auto;
	padding:60px 0;
	width:100%;
}
#footer_container {
	background:#eee;
	border:1px solid #666;
	bottom:0;
	height:60px;
	left:0;
	position:fixed;
	width:100%;
}
#footer {
	margin:0 auto;
	max-width:940px;
	text-align:center;
}
@media screen and (max-width:650px) {
#header_container { height:90px }
#content_container { padding-top:90px }
}
@media screen and (max-width:500px) {
#header_container { height:120px }
#content_container {
	padding-top:120px;
	padding-bottom:90px
}
#footer_container { height:90px }
}
</style>
</head>
<body>
<div id="header_container">
		<div id="header">Start Header Content Header Content Header Content Header Content Header Content Header Content Header  Content Header Content Header Content Header Content Header Content Header Content Header Content Header Content Header Content Header Content Header Content End </div>
</div>
<div id="content_container">Start contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents<br>
		contents End<br>
</div>
<div id="footer_container">
		<div id="footer"> Start Footer Content Footer Content Footer Content Footer Content Footer Content Footer Content Footer Content Footer Content Footer Content Footer Content End</div>
</div>
</body>
</html>

Of course if the content is dynamic in the header or footer then you can’t really account for it like this. It will also break on zoom unless you leave a little extra room.

dotJoon · April 2, 2014, 8:13am

body {
	display: flex;
	height: 100[COLOR="#FF0000"]vh[/COLOR];
	flex-direction: column;
}

What is vh in the above?
What is the literal meaning of it?

PaulOB · April 2, 2014, 6:10pm

Its the new vh unit which stand for viewport height. I vh unit is 100th the height of the viewport.

More info here.