Footer is dynamically fitting to the bottom of the screen.
example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>
</body>
</html>
<style>
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
display:table;
table-layout:fixed;
margin:0 auto;
}
.row {
display:table-row;
background:orange
}
div.row {
height:100%;
background:pink
}
</style>
example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>
</body>
</html>
<style>
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
display:table;
table-layout:fixed;
margin:0 auto;
}
.row {
display:table-row;
background:orange
}
div.row {
height:100%;
background:pink
}
</style>
No comments:
Post a Comment