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>
Related
I have a page that overflows the viewport both horizontally and vertically, and I'd like to sticky a nav so that it is always at the top and horizontally centered.
Right now, I can get sticky top working, but the centering does not work. Can anyone help?
body {
text-align: center;
}
#header {
background-color: yellow;
width: max-content;
position: sticky;
top: 0;
left: 50%;
translate: -50%
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
<div id="header">
I should always be at the top and centered
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
CodePen: https://codepen.io/hbchin/pen/bGjpQLJ
After doing some digging I found this:
Why is my element not sticking to the left when using position sticky in css?
Essentially, it's not sticking because the body is automatically expanding to the width of the size of the very big box.
Putting it in an inline-block container will make the width not auto-expand to children, and thus allow sticking behavior.
So this works:
body {
text-align: center;
}
#header {
background-color: yellow;
width: max-content;
position: sticky;
top: 0;
left: 50%;
translate: -50%
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
#whole-thing {
display: inline-block;
}
<div id="whole-thing">
<div id="header">
I should always be at the top and centered
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
</div>
Unlike position: sticky and vertical positioning, left: 50% isn't a dynamic positioning option; it just sets the initial position. A horizontal scrollbar will still cause it to move, so that it remains "50% from the left edge".
To achieve a fixed left-right position, add a header container with position: fixed around your header, and within that, your header div can get auto margins:
body {
text-align: center;
max-width:100vw;
overflow:scroll;
}
/*added*/
#headercontainer{
position:fixed;
width:100vw;
left:0;
top:0;
}
#header {
background-color: yellow;
width: max-content;
/*left: 50%;*/ /*Removed*/
margin:auto;/*added*/
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
<div id="headercontainer"> <!-- added -->
<div id="header">
I should always be at the top and centered
</div>
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
You mean something like this?:
<div id="header-container">
<div id="header">
I should always be at the top and centered
</div>
</div>
<div id="container">
<span>
I am extremely large and wide
</span>
</div>
body {
text-align: center;
}
#header-container {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 20px;
overflow: auto;
background-color: yellow;
}
#header {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: max-content;
}
#container {
background-color: black;
color: white;
width: 200vw;
height: 200vh;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
I would like that the footer stays at the bottom of my web page. I did it, but if the main content is long the user can not scroll the page; the consequence (I guess) is that the footer overlaps the content.
Another problem is that the width of the footer is larger than the "header" of the website.
Here is my CSS for the footer:
#footer {
position: absolute;
bottom: 0;
width: 100%;
font-size: 0.9em;
padding: 2em;
background-color: orange;
border: 0.2em #4040ff;
margin-bottom: 1em;
border-style: solid;}
I upload also the image of the screen in order to show you the graphic problem.
Thank you.
For me always work this:
html { height: 100%; }
body {
min-height:100%;
position:relative;
padding-bottom:[footer-height]
}
.footer {
position: absolute;
left: 0 ; right: 0; bottom: 0;
height:[footer-height]
}
I have written one code snippet, which can solve your problem
html, body{
height:100%;
margin:0;
}
header {
height: 30px;
background-color: #000;
color: #fff;
padding: 20px;
text-align:center;
}
footer{
height: 30px;
background-color: #000;
color: #fff;
padding: 20px;
text-align:center;
margin-top: auto;
}
body{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction:column;
}
header p, footer p{
margin: 5px 0px;
}
.container{
text-align:center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header>
<p>This is header</p>
</header>
<div class="container">
<p>This is body content</p>
</div>
<footer>
<p>This is footer</p>
</footer>
</body>
</html>
Please consider this style:
.root {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
width: 100%;
background-color: red;
display: flex;
height: 100px;
justify-content: space-between;
.logo-pane {
width: 100px;
height: 100px;
background-color: green;
}
.user-actions {
width: 100px;
height: 100px;
background-color: blue;
}
}
.content {
flex-grow: 1;
background-color: pink;
}
What I want to achieve is that the content element will take the remaining height of the viewport, but it takes only his content height.
HTML:
<div class="root">
<div class="header">
<div class="logo-pane">Logo</div>
<div class="user-actions">User Actions</div>
</div>
<div class="content">
content
</div>
</div>
Codepen
The problem is the surrounding .root. You have to increase the height of the .root to the remaining space. So you have to set the height:100vh; on .root. Try the following solution:
body, html {
margin:0;
padding:0;
}
.root {
display: flex;
flex-direction: column;
height: 100vh;
align-items:stretch;
align-content:stretch;
}
.header {
width: 100%;
background-color: red;
display: flex;
height: 100px;
justify-content: space-between;
}
.logo-pane {
width: 100px;
height: 100px;
background-color: green;
}
.user-actions {
width: 100px;
height: 100px;
background-color: blue;
}
.content {
flex-grow:1;
background-color: pink;
}
<div class="root">
<div class="header">
<div class="logo-pane">Logo</div>
<div class="user-actions">User Actions</div>
</div>
<div class="content">content</div>
</div>
.content {
flex-grow: 1;
background-color: pink;
height: 100vh;
}
Set the :root to 100vh (100% of the viewport height) instead 100%
You can simply add
height: 100% to html, body
add height to 20% for root div
add height to 80% for content div
will solve your problem
html,body {
height: 100%;
}
Here is the jsFiddle
Hope it helps :)
I think your misunderstanding what flex does. Flex is used to align its children, not to fill a viewport. Heres another solution.
https://jsfiddle.net/rob_primacy/1wnpr50s/
<div class="root">
<div class="header">
<div class="logo-pane">Logo</div>
<div class="user-actions">User Actions</div>
</div>
</div>
<div class="content">
content
</div>
and the css
.root {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.header {
width: 100%;
background-color: red;
display: flex;
height: 100px;
justify-content: space-between;
position: relative;
}
.user-actions {
width: 100px;
height: 100px;
background-color: blue;
}
.logo-pane {
width: 100px;
height: 100px;
background-color: green;
}
.content {
background-color: pink;
position: absolute;
height: 100%;
left: 8px;
right: 8px;
}
Use like this
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
body{
margin:0;
}
.root {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
width: 100%;
background-color: red;
display: flex;
height: 100px;
justify-content: space-between;
.logo-pane {
width: 100px;
height: 100px;
background-color: green;
}
.user-actions {
width: 100px;
height: 100px;
background-color: blue;
}
}
.content {
flex-grow: 1;
background-color: pink;
height:100%;
width:100%;
position: fixed;
}
</style>
</head>
<body>
<div class="root">
<div class="header">
<div class="logo-pane">Logo</div>
<div class="user-actions">User Actions</div>
</div>
<div class="content">
content
</div>
</div>
</body>
</html>
Your codepen linked works fine. I do not understand where you get stuck.
You could basicly build your template from 2 containers :example with header and main
html,
body {
height: 100%;/* or just : 100vh; for body only */
margin: 0;
}
body {
display: flex;
flex-direction: column;
/* width and margin:auto is avalaible */
}
header {
/* height: 50px;or do not set any and let grow from its content */
background: gray;
}
main {
flex: 1;/* will fill up all space left */
background: lightblue;
/* overflow:auto; optionnal if you do not want html to scroll and keep header fixed */
}
<header>
whatever <br/> sizes me
</header>
<main>
content
</main>
Make it simple to start with :)
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'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>