As seen here, I am trying to recreate the solution for a sticky footer - that does not have a set height.
I have created the site in the same fashion, but it seems like the content keeps overflowing over the footer, and the footer is simply static (not so sticky!)
Obviously, this flexbox setting is constricting the 'mid section' from expanding beyond the "allowed" size (= Window - header - footer), and it won't resize to fit the content and push down the footer.
I tried changing the different settings for overflow on everything, I've tried changing the display options of the elements in the mid section and the mid section itself. I can't find the issue!!
Now I realise I can solve this a hundred different ways if I just defined the hight of the footer. But I'm trying not to.
Here is some simplified HTML to show my structure
<body class="Site">
<header><div id="header>...</div></header>
<div id="mid" class="Site-content">
<div id="links" class="fadein">
<ul><li>..</li></ul>
</div>
<div id="content" class="content fadein">
text text text
</div>
</div>
<footer>
<div id="footer"></div>
</footer>
</body>
and the relevant css
div#header {
position:relative;
display:block;
top:0px;
left:0px;
margin:0 auto 5px auto;
width:auto;
}
div#mid {
display:block;
width:100%;
height:auto;
position: relative;
background:#C69;
}
div#content {
margin-left:120px;
width:720px;
padding: 25px;
background:#0F9;
}
div#links {
position:absolute;
left:0px;
top:0px;
width:100px;
padding: 5px;
margin-left:10px;
margin-top:35px;
background:#0C6;
}
.Site {
min-height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.Site-content {
flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}
footer {
clear:both;
width:auto;
padding:10px;
}
Your ingenious solution would be much appreciated!
Check this link http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ to see how to implement sticky footer using flexbox.
And personally I am using this technique http://www.joshrcook.com/a-responsive-sticky-footer/ which is done without using flexbox.
<body>
<div class="container">
<!-- content here -->
<footer>
<!-- content for footer -->
</footer>
</div>
</body>
And for the CSS is pretty simple
html,
body {
height: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
}
footer {
display: table-row;
height: 1px;
}
Hope this help.
Related
I've got the following setup:
header,
content - which needs to be full height of the browser,
and footer
The current setup below is how I want it (when the browser is opened fully). Basically the content div should have 100% height and you simply scroll to view the footer. The amount you scroll is based on the height of the footer. The content will be a simple login form. I've added in a div with a fixed height to demo my issue (The login div could be any height). However the problem is when the browser is resized vertically. This is the tricky bit to explain:
My question is how do I prevent the footer from overlapping the content div? I'd like the footer to snap to the bottom of the content div. As the browser window gets shorter, i'd like the content div to still remain 100% in height. The browser will cut the content div as it gets vertically shorter (which is fine) but I'd like the footer underneath the content div and still want to only be able to scroll to the height of the footer.
I think i'm missing margin-bottom somewhere but not quite sure where. Could someone please help with this issue. Thanks in advance.
the html:
<body>
<div class="wrapper">
<div class="content">
<div class="loginPanel">
</div>
</div>
</div>
<div class="footer">
footer, hidden until scrolled
</div>
</body>
the css:
html, body {
height:100%;
padding:0;
margin:0;
}
.wrapper {
height:100%;
background:orange;
}
.content {
background:grey;
width:100%;
height:100%;
}
.footer {
background:purple;
height:200px;
width:100%;
color:#fff;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
You should be able to achieve what you want with the following:
html, body {
height:100%;
padding:0;
margin:0;
position:relative;
}
.wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
.content {
background:grey;
width:100%;
min-height:100%;
}
.footer {
height:200px;
width:100%;
}
.loginPanel {
width:600px;
height:300px;
background:green;
margin:0 auto;
}
<div class="wrapper">
<div class="content">
<div class="loginPanel"></div>
</div>
<div class="footer">footer, hidden until scrolled</div>
</div>
You can try adding a margin-bottom to the <body> or <html> element; that should fix your issue.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}
I am using the twitter bootstrap "sticky footer" example code.
The sticky footer works fine, but now I want to "fill" the remaining space by making the body (or a div) take up the height of html element and then apply a background color.
HTML
<body>
<p>....</p>
<footer class="footer">
<div class="container">
<p>Place sticky footer content here.</p>
</div>
</footer>
</body>
CSS
html {
position: relative;
min-height: 100%;
background-color: green;
/* background-color: transparent; */
border: 3px solid blue;
}
body {
background-color: tomato;
padding-top: 20px;
border: 3px solid black;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 60px;
background-color: #0bb;
}
Here is a working demo - http://jsbin.com/xurulofame/1/edit?html,css,output
How can I make the BODY element take up 100% height of the HTML element - and therefore fill the background with the "tomato" color?
Use this:
body {height:100vh;}
along with adding the rest of the properties for your body element
Use height:100% inside HTML instead of using min-height. Here is the result http://jsfiddle.net/z9h18xge/
Please check this code. Or link to fiddle
html{height:100%;}
body{
margin:0;
height:100%;
}
#wrapper{
width:100%;
height:100%;
display:table;
margin:0 auto;
}
#footer{
width:100%;
overflow:hidden; /*for FF on Windows 7*/
display:table-footer-group;
height:1%;
background: #ccc;
height: 100px;
}
<div id="wrapper"> <!-- table -->
<div class="w1">
<p>header and content of the page</p>
</div>
<div id="footer"> <!-- table-footer-group -->
<p>footer content</p>
</div>
</div>
I want to achieve the following behavior with HTML and CSS on a single webpage
I got the first three areas to work (black, red, blue) but I had problems with the scrollable content (green). It works with static height, but I don't know how to fill the rest of the page dynamically.
Here is what I got
Link to Code
<div class="body">
<div class="menu">
menu
</div>
<div>
<div class="dynamiccontent">
<div class="errorheader">
Errors
</div>
<div class="errorcontent">
errors
</div>
<div class="fixedtext">
some text
</div>
<div class="fillcontent">
fillcontent
</div>
</div>
</div>
.body
{
background:red;
margin:0 auto;
width:100%;
top:0px;
}
.menu
{
background:black;
color: white;
height: 100px;
}
.dynamiccontent
{
position:fixed;
top:50px;
margin:0px auto;
width:100%;
background: red;
}
.errorheader
{
color: white;
text-align: center;
font-size: 1.4em;
}
.errorcontent
{
color: white;
text-align: center;
}
.fixedtext
{
background: blue;
color: white;
position: relative;
}
.fillcontent
{
background: green;
position: relative;
overflow: auto;
z-index: 1;
height: 400px;
}
A nice to have would also be the use of the "browser-scrollbar" on the right side (not only a short local scrollbar in the green content-box).
Thank you for your help!
Using overflow:hidden to the html,body,.main and overflow:scroll to the .main-content, you can simulate what you need.
HTML:
<div class="main">
<div class="header">header</div>
<div class="dynamic-content">
<div class="dynamic-content-text">
dynamic-content-text<br/>...
</div>
<div class="dynamic-content-fixed">dynamic-content-fixed</div>
</div>
<div class="main-content">
main-content<br />...
</div>
</div>
CSS:
html,body, .main{
margin:0;
padding:0;
height:100%;
overflow: hidden;
}
.header{
position: fixed;
left:0;
right:0;
height:50px;
background: red;
}
.dynamic-content{
padding-top:50px;
}
.dynamic-content-text{
background:yellow;
}
.dynamic-content-fixed{
background:blue;
}
.main-content{
background:green;
height:100%;
overflow: scroll;
}
JSFiddle
You could achieve this with jQuery/ javascript.
First check if the page has a scrollbar, if there is no adjustment is needed. If not, the last container needs to be stretched to fill the rest of the window space.
Add the container heights together and subtract from the window height then set that as height for the last container.
Just have method like (Not tested)
$(document).ready(function(){
if(!hasScrollbar()) {
var filled = $(".errorheader").outerHeight() + ... ;
$(".fillcontent").height($(window).height()-filled);
}
});
There are a lot of code for finding if the window has a scrollbar, check here on stackoverflow. If you expect the users to resize the window you could add a callback for $(window).resize();
Another possible solution would be to use the body element to fake that the last container expands. If the containers are identified by their background you could just use the same background for as the last container. Just remember to set the body to fill 100%.
My HTML looks like the following, without the content though as the following is only needed to answer my question:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
I've been trying to get my footer to remain at the bottom of my webpage, beneath .mainbody. The problem though, is that the footer seems to sit at the bottom of my window only, not at the bottom of the webpage which could extend well below my actual window when I have a lot of content. Right now, I have all the div's above set to position "absolute"; as well the html and body are styled in the following way:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
}
Now, the only way I can get my footer to remain at the bottom of the webpage is to set top:-3998px (or whatever the height of my largest window is). Obviously this won't work once a webpage has enough content on it to expand it past that height. If I set position to relative, it appears at the top of my whole webpage and when positioned absolute it appears at the bottom of the viewable window only. You can check out the website at http://www.edmuncovered.com to see what I mean or to check the rest of the code. Parts of my website include adding content every day or so so I want to make sure the webpage can increase in height with added content, but that the formatting stays the same and the footer obviously stays at the bottom. Any ideas?
I guess this is what you need...
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You can try something like this:
CSS:
.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px;
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}
Html:
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</div>
<div class="footer">Footer</div>
</div>
Working jsFiddle: http://jsfiddle.net/LrfXr/
I'm going to assume this is a questions similar to the one here: How to Stop Sticky Footer at Content DIV
At which there are a few good answers.
Links on that page:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Basically you're looking for a footer that attaches itself to the bottom of the viewport but also extends should the content push it off the viewport. Martin Bean and Ryan Fait have the best methods of this. The bootstrap's method is a variation of this method too.
Happy hunting.
Here is the jsFiddle link. Followings are your css and html code:
HTML code
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
<div class="footer">Footer</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body {
background-color:#E4E2E2;
color:#fff;
}
.container {
min-height:100%;
/*position:relative;*/
}
.socialmedia {
background-color:#186301;
padding:10px;
}
.navbar {
background:#A60206;
padding:10px;
min-height:30px;
}
.mainbody {
padding:20px;
background-color:#6D0594;
}
.footer {
position:absolute;
bottom:0;
padding:2%;
background-color:#000;
width:96%;
}
This is working for me:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
In short, use this:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body> </html>
I have an aside (sidebar) and I'm trying to break it up into 3 sections equally.
Here's what it looks like:
This is my html:
<aside id="sidebar">
<div id="side_events">
Events
</div>
<div id="side_trailer">
Trailer
</div>
<div id="side_advertisement">
Advertisement
</div>
</aside>
This is the majority of my CSS:
* {
margin: 0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
body{
width: 100%; /*always specify this when using flexBox*/
height:100%;
display: -webkit-box;
text-align:center;
-webkit-box-pack:center; /*way of centering the website*/
background-image:url('bg2.jpg');
}
#wrapper{
max-width: 850px;
display: -webkit-box; /*means this is a box with children inside*/
-webkit-box-orient:vertical;
-webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
background-color: #B137D6;
}
#body_div{
display: -webkit-box;
-webkit-box-orient:horizontal;
color:#000000;
}
#main_section{
border:1px solid blue;
-webkit-box-flex: 1;
margin: 20px;
padding: 3px;
}
#sidebar{
width: 210px;
height: 100%;
margin: 20px;
padding: 0px;
background: #999999;
border:#FF0000 1px solid;
}
#side_events,
#side_trailer,
#side_advertisement{
height:33.333%;
}
#side_events{
background:#102A50;
display:block;
}
#side_trailer{
background:#173B72;
display:block;
}
#side_advertisement{
background:#296CD0;
display:block;
}
You just need to set the #sidebar childs height to 100%/3 = 33.333%, but to achieve this you need also to set html and body tags height to 100%:
body,
html {
height: 100%;
}
#side_events,
#side_trailer,
#side_advertisement{
height:33.333%;
}
Most of the time you have to apply a 100% height to the parent DIV to get this working.
Your height of your parent element is auto and the child elements are 100%. So you need to define the parent element height in order for the child elements to be defined as 100%.
You parent element (#sidebar) has 100% height.
I wrote a jsfiddle so you could see my point of the 100% height on the parent element. The parent element is set to 100% but has nothing to derive 100% from. So I set the container in the example to a define height. http://jsfiddle.net/rtLeM/
<!-- HTML -->
<div id="container">
<aside id="sidebar">
<div id="side_events">
Events
</div>
<div id="side_trailer">
Trailer
</div>
<div id="side_advertisement">
Advertisement
</div>
</aside>
</div>
/* CSS */
#container{
height:300px;
}
#sidebar{
width:150px;
height:100%;
}
#side_events{
height:33%;
width:100%;
display:block;
background-color:#555;
}
#side_trailer{
height:33%;
width:100%;
display:block;
background-color:#999;
}
#side_advertisement{
height:33%;
width:100%;
display:block;
background-color:#333;
}