asked on

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>

Sam Jacobs

Try:

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

Open in new window

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

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.

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 Hansen

@David S. - have corrected thanks.