I've been trying various techniques to implement Ryan Fait's Sticky Footer technique and none seem to work. My footer content always overlaps my main content when the browser is vertically challenged. It could be because I have many fixed positioned DIVs nested within the footer. When I wrap these DIVs around a parent DIV (#footer), this parent DIV doesn't seem to even appear, nor can I apply styles to it to control its position (and the content within).
HTML:
<body>
<div class="wrapper">
<div id="content"> Juicy stuff goes here</div>
<div class="push"></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div><!-- Footer Area -->
</body>
CSS:
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -240px;
}
.footer, .push {
height: 240px;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: fixed;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: fixed;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: fixed;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: fixed;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
Thanks!
This is a better way to do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer"></div>
</body>
</html>
The limitation of sticky footers is that the footer must stay at a fixed height. But the elements you have in there shouldn't affect the layout as long as you are careful.
EDIT: Here's a revised template with the footer elements included:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924; position: relative;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: absolute;;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: absolute;;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: absolute;;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: absolute;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div>
</body>
</html>
Related
I have a footer that is used through out my web app, I need it to be shown at the bottom of the screen if the content is less than the screen size, but not stick if the content is bigger (i.e. I need to be seen only if you scroll down to find it if the content is bigger than the screen size)
I found multiple questions and topics discussing both separately, but not together.
Here you are:
head, body {
height: 100%;
padding-bottom: 40px;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: gray;
padding: 10px;
text-align: center;
}
<h1>awesome page</h1>
<p>awesome content</p>
<div class="footer">
awesome footer
</div>
Set the body or a containing element to have a min-height of the 100vh and then position your footer absolutely at the bottom of the of the element:
.container {
min-height: 100vh;
background: firebrick;
position: relative;
}
footer {
background: lime;
box-sizing: border-box;
padding: 20px;
bottom: 0;
left: 0;
position: absolute;
width: 100%;
}
<div class="container">
<footer></footer>
</div>
You can do it with flexbox:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
.all {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
background-color: yellow;
}
.content {
background-color: red;
}
.footer {
background-color: green;
}
</style>
</head>
<body>
<div class="all">
<div class="content">
Content...
</div>
<div class="footer">
Footer...
</div>
</div>
</body>
</html>
I'm currently creating a single page video playing for store advertisement.
My problem is how can i set the video tag to full height relative to its parent div? I used vh dimension but still no luck to solve that.
As you can see on the image the video portion has gaps on both its top and bottom. already set the padding and margin to 0.
Code:
<!DOCTYPE html>
<!-- http://www.101computing.net/html-website-layout/ -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
BODY {
background-color: #FFF;
overflow: hidden;
width: 100%;
margin: 0px;
}
.page {
display: block;
width: 100%;
min-height: 800px;
overflow: auto;
margin: 0px auto 0px auto;
box-sizing: border-box;
}
.pageClockPanel {
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
clear: none;
width: 60%;
height: 10%;
padding: 10px;
}
.pageRightPanel {
background-color: #1A237E;
position: fixed;
top: 0px;
right: 0px;
clear: none;
width: 40%;
height: 87%;
box-sizing: border-box;
padding: 10px;
}
.pageLeftPanel {
background-color: #E64A19;
position: fixed;
top: 10%;
left: 0px;
clear: none;
width: 60%;
height: 77%;
box-sizing: border-box;
padding: 0px;
}
.pageBottomPanel {
background-color: #333;
position: fixed;
bottom: 0px;
right: 0px;
clear: none;
height: 13%;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.item img {
width: 100%;
min-height: 77vh
}
.item video,
source {
width: 100%;
min-height: 77vh;
}
</style>
<title>Page Title</title>
<!-- https://www.bootply.com/59900 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page">
<div class="pageClockPanel">
</div>
<div class="pageRightPanel">
</div>
<div class="pageLeftPanel">
<div class="row">
<div class="col-md-12">
<div class="item">
<video video autobuffer autoplay>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
</video>
</div>
</div>
</div>
</div>
<div class="pageBottomPanel">
</div>
</div>
</body>
</html>
I solved my problem by adding this css
.item{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.item video {
min-width: 100%;
min-height: 100%;
height:auto;
}
css explanation here
The video tag get always the same ratios (width/height) as the video file.
It would looks like stretched if you want to fit the width and the height - if this is just possible.You can try to set the height attribute of the video tag
Yeah I know the topic was explained probably million times, but have a look at this. I cant make #content and/or .content-bg go all the way down and show the pattern down to the bottom:
html, body {
height: 100%;
}
body {
min-width: 500px;
margin: 0px;
padding: 0px;
}
#wrapper {
position: relative;
width: 100%;
min-height: 100%;
height: auto !important;
margin: 0px auto -97px;
}
#header {
width: 100%;
height: 100px;
position: relative;
background-color: #ccc;
}
#content {
min-height: 100%;
}
.content-bg {
background: url("http://www.squidfingers.com/_patterns/files/pattern_136.gif") repeat scroll 0% 0% #F9EDE4;
overflow: hidden;
}
#footer {
background-color: #ccc;
height: 97px;
}
<body>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="content">
<div class="content-bg">
content
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</body>
Any ideas?
I have a wrapper div that holds a header, navbar, and a content div. when the content expands I want the wrapper div to expand with it however it currently doesn't do this. In other word I want the edges of the content to remain in the wrapper div. Once the content div expand beyond the height of the screen I need the scrollbar to appear on edge of the edge of the edge of the window.
my css:
* {
margin: 0px;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
overflow-y: auto;
}
body {
background-image: url(../Images/background1.jpg);
background-size: cover;
min-width:1000px;
background-repeat: no-repeat;
}
#wrapper1
{
height: 100%;
width: 94%;
margin-left: auto;
margin-right: auto;
background-color: #006699;
position: relative;
overflow: hidden;
}
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#header, #nav, #content
{
width: 94%;
margin-left: auto;
margin-right: auto;
}
#header
{
height: 15%;
background-color: Red;
}
#nav
{
height: 2%;
min-height: 35px;
background-color: Yellow;
}
#content
{
height: 100%;
background-color: brown;
}
HTML:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
</body>
http://jsfiddle.net/VB3PM/
Try this:
<style type="text/css">
html,
body
{
height:100%;
}
#wrapper
{
position:relative;
min-height:100%;
}
</style>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
</div>
</div>
Change the overflow CSS property of #wrapper from hidden to auto as shown below
#wrapper
{
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: auto;
}
To make the issue easier to analyze I have created this jsFiddle:
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; padding-top: 30px; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; padding-top: 30px; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; padding-top: 30px; }
#footerContainer { position: absolute; bottom: 0; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
With the markup of top, middle, and bottom sections, problem is:
1- As you can see the footer colored in black is not really on the bottom of the page despite having position:absolute and bottom:0px on the footer div
2- More importantly, leftSection, middleSection and rightSection DIVs overlap with the header and footer DIVs, in fact, in this fiddle the only way to see the text displayed of the 3 middle sections is to have padding placed to avoid having it displayed underneath the header DIV.
I have tried placing top and bottom values of 30px on middleContainer to fix the overlap issue but this does not solve the problem, all I want is to keep headerContainer on top and footerContainer on the bottom while all the 3 middle sections adjust to 100% height. leftSection and rightSection have fixed width, but middleSection has flexible width and height.
http://jsfiddle.net/grc4/XTQuT/2/ does what I wanted exactly without specifying solid height values.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
margin: 0;
height:100%;
}
#mainContainer {
position: absolute;
right: 4%;
left: 4%;
height: 100%;
}
#headerContainer {
width: 100%;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 30px 0;
}
#leftSection {
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
}
#middleSection {
position: absolute;
background-color: yellow;
left: 175px;
right: 175px;
top: 0;
bottom: 0;
color: black;
}
#rightSection {
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
}
#footerContainer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: #323232;
color: white;
}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top: 30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top: 30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top: 30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
The "padding-top: 30px;" on your 3 inner elements is making them 30px taller than the height of the actual body, creating your problem.
Remove the top padding from those 3 elements, then make your header and footer relatively positioned, rather than absolute, and you should be set.
Like this: http://jsfiddle.net/BPJxD/28/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; }
#headerContainer { width: 100%; z-index: 10; position: relative; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; }
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
#footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; }
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
Your problem was that you were using needless absolute positioning in headercontainer and footercontainer, solution
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
leftSection
</div>
<div id="middleSection">
middleSection
</div>
<div id="rightSection">
rightSection
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
</body>
</html>
CSS:
body { margin:0; }
#mainContainer
{
position: absolute;
right: 4%; left: 4%;
height: 100%;
}
#headerContainer
{
width: 100%;
z-index: 10;
position: relative;
background: #323232;
color: white;
height: 30px;
}
#middleContainer { height: 100%; }
#leftSection
{
position: absolute;
float: left;
width: 175px;
background: #71ABD1;
height: 100%;
overflow: auto;
color: black;
padding-top: 30px;
}
#middleSection
{
position: absolute;
height: 100%;
background-color: yellow;
left: 175px;
right: 175px;
color: black;
padding-top: 30px;
}
#rightSection
{
float: right;
height: 100%;
width: 175px;
border-left: 1px dotted black;
background: red;
color: black;
padding-top: 30px;
}
#footerContainer
{
position: relative;
bottom: 0; width: 100%;
height: 30px;
background: #323232;
color: white;
}
Reviewing your whole Fiddle I noticed that you are using absolute positioning on every div. This is plane wrong.
You should only absolute positioning when:
You need a container that is free of the document's usual formatting. Such as a popup or a floating box.
You need to use a div inside a parent div with fixed positioning, but this will only work if parent positioning is set to relative.
You can remove all 3 of
padding-top: 30px;
like
#leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; }
#middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; }
#rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; }
and change your html like this
<div id="mainContainer">
<div id="headerContainer">
headerContainer
</div>
<div id="middleContainer">
<div id="leftSection">
<div style="margin-top:30px;">leftSection</div>
</div>
<div id="middleSection">
<div style="margin-top:30px;">middleSection</div>
</div>
<div id="rightSection">
<div style="margin-top:30px;">rightSection</div>
</div>
</div>
<div id="footerContainer">
footerContainer
</div>
</div>
I hope this can be helpful.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {margin:0; }
#mainContainer { position: relative; right: 4%; left: 4%; height: 100%; width:1000px; }
#headerContainer { width: 1000px; z-index: 10; position: absolute; background: #323232; color: white; height: 30px; }
#middleContainer { height: 100%; width:1000px; position:relative; display: table-cell;}
#leftSection { float: left; width:25%; background: #71ABD1; overflow: auto; color: black; padding-top: 30px; height: 100%;}
#middleSection { float: left; height:100%; width:50%; background-color: yellow; color: black; padding-top: 30px; }
#rightSection { float:left; height:100%; width: 25%; background: red; color: black; padding-top: 30px; }
#footerContainer { bottom: 0; width:1000px; height: 30px; background: #323232; color: white; float:left;}
</style>
</head>
<body>
<div id="mainContainer">
<div id="headerContainer"> headerContainer </div>
<div id="middleContainer" >
<div id="leftSection"> leftSection </div>
<div id="middleSection"> middleSection </div>
<div id="rightSection"> rightSection
rightSection rightSection rightSection rightSection rightSection rightSection rightSection </div>
</div>
<div id="footerContainer" > footerContainer </div>
</div>
</body>
</html>