layout issues

mikha
mikha used Ask the Experts™
on
I have following layout, the main content area is loaded dynamically, based on the user input. sometimes there is no data to be displayed, say the table is empty.
I have min height set for the table section. but, when there is no data in the table. the footer doesn't stick to the bottom of the page .

is there a way to make the footer stick to the bottom of the page, all the time?


<div id=header></div>
<div id="mainContent">
    ..... dynamically loaded section

</div>
<div id="footer"></div>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Sam JacobsDirector of Technology Development, IPM

Commented:
Try:
#footer {
    position: absolute;
    bottom: 0px;
}

Open in new window

Consultant & Challenge Subduer
Top Expert 2009
Commented:
That's called "CSS Sticky Footer". The basic solution is to put one <div> (perhaps given a class of "pageWrapper") around everything except the footer and set it to "min-height:100%" and give "height:100%;padding:0;margin:0" to "html,body". There are several alternatives to keep the footer from causing a scrollbar on pages with only a little content. I suggest giving ".pageWrapper" a negative top margin that's the height of the footer and adding a rule ".pageWrapper:before":
html,body {
	padding: 0;
	margin: 0;
	height: 100%;
}
.pageWrapper {
	margin-top: -200px; /* a negative amount of the footer's total height */
	min-height: 100%;
}
.pageWrapper:before {
	content: '\a0';
	display: block;
	height: 200px; /* or whatever the footer's total height might be */
}

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You can do this with flexgrid that makes it a lot easier than the traditional solutoins

Bootstrap version
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
html, body {
	height: 100%;
}
.full-height {
	min-height: 100%;
}
header {
	background: red;
	color: #fff;
}
footer {
	background: green;
	color: #fff;
}
</style>
</head>
<body>
<div class="d-flex flex-column full-height">
	<header>Header</header>
	<div class="content flex-grow-1">Content</div>
	<footer>Footer</footer>
</div>
</body>
</html>

Open in new window


Non-bootstrap version
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<title>Title</title>
<style>
html, body {
	height: 100%;
}
*, ::after, ::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 1rem;
	font-family: arial;
	line-height: 1.5;
}
.d-flex {
	display: flex !important;
}
.flex-column {
	flex-direction: column!important;
}
.flex-grow-1 {
	flex-grow: 1!important;
}
.full-height {
	min-height: 100%;
}
header {
	background: red;
	color: #fff;
}
footer {
	background: green;
	color: #fff;
	display: block;
}
</style>
</head>
<body>
<div class="d-flex flex-column full-height">
	<header>Header</header>
	<div class="content flex-grow-1">Content</div>
	<footer>Footer</footer>
</div>
</body>
</html>

Open in new window

David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
Flex does have a big advantage in that the height of the footer doesn't need to be known, however, it has much shallower backwards compatibility (especially without using the prefixed variants).

BTW, Julian, "1rem%" is a typo.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@David S. - have corrected thanks.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial