layout issues

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>
mikhaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sam JacobsDirector of Technology Development, IPMCommented:
Try:
#footer {
    position: absolute;
    bottom: 0px;
}

Open in new window

David S.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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
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.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.
Julian HansenCommented:
@David S. - have corrected thanks.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.