I've been testing my site on multiple devices, and when testing on a screen with high resolution there is all this extra white space underneath the footer.
How do I make the height dynamic, fixing this issue?
My HTML is as follows:
<div class="contact">
<div class="content--container">
........
</div>
<div class="container">
<div class="columns is-multiline">
<div class="column is-12">
.......
</div>
</div>
</div>
</div>
<div class="footer">
......
</div>
A quick and easy fix would be to add a min-height to your .contact element.
Assuming it sits directly insider your body element, and if your footer height is 200px, you could do:
.contact {
min-height: calc(100% - 200px);
}
This does require that your body is either position:static; (the default) or has a min-height of 100%.
Add a min-height to your body like this:
body {
min-height: 100%;
}
Change your footer position to absolute like this:
.footer {
position: absolute;
}
Position and add width to your footer like this:
.footer {
position: absolute;
bottom:0;
left:0;
width: 100%;
}
Try to add these for CSS (it's from http://mystrd.at/modern-clean-css-sticky-footer/):
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML template for that is:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
Next option is to use flexbox like these example: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
In these example body has class="Site" and content also have a class called class="Site-content" and looks like these:
<body class="Site">
<header>Your header</header>
<main class="Site-content">
<div> Text </div>
</main>
</body>
CSS for these example looks like:
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
Full source for the Site component used in this example you can find here: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css
Another easy way to make a footer look like it has a dynamic height (if a tall footer height doesn't matter to you) is by changing the body's background-color to match the footer's. Then you can give one of your containers a 100% width and apply a different background-color.
That gives you the visual separation of the content and the footer without having to position or resize the footer.
Heres's the CSS:
body {
background-color: tomato;
height: 100%;
}
header {
color: white;
padding: 20px;
}
.container {
background-color: white;
height: 200px;
padding: 20px;
width: 100%;
}
footer {
background-color: tomato;
color: white;
padding: 20px;
}
and the HTML:
<header>
<h1>This is my header</h1>
</header>
<div class="container">
<p>This is my content</p>
</div>
<footer>
<p> this is my footer that looks like it has a variable height.</p>
</footer>
Link to a working example:
http://codepen.io/Brydave/pen/dNQJMb
Related
I'm making a user-resizable GUI window with a header that gains height through new elements, a footer with static height, and a spacer in between that automatically takes up the rest of the height. I attempted using this answer, but the footer ended up vertically-centered. Picture:
If anyone knows why off the top of their head, it would be greatly appreciated. The element is being added to the page with javascript so the code is pretty messy. Thank you for your time.
What about the following:
<body>
<header class="header"></header>
<main class="spacer"></main>
<footer class="footer"></footer>
</body>
.
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
.spacer {
flex: 1;
}
I still don't know what the issue was, but I made a solution using the css calc() function.
HTML:
<div id="myWindow">
<div id="header">
Header
</div>
<div id="footer">
<div id="subHeaderContainer">
<div id="subHeader">
Sub Header
</div>
</div>
<div id="subFooter">
Sub Footer
</div>
</div>
</div>
CSS:
#myWindow {
width: auto;
height: auto;
resize: both;
border: 2px solid black;
overflow:hidden;
}
#header {
height: 20px;
background-color: grey;
}
#footer {
width:100%;
height: calc(100% - 20px);
}
#subHeaderContainer {
width:100%;
height: calc(100% - 30px);
}
#subFooter {
width:100%;
height:30px;
}
First question so sorry if this is a bit squiffy.
I'm trying to get a full (100%) width fixed header with content within, such as logo and navigation links, that is aligned to the main container. I'd like to do this without the use of margining left or right on the logo/nav content as that doesn't seem particularly flexible.
I tried putting the header div within the container block, that fixes the alignment issue but then I can no longer go full width.
So basically how do I get content in a full width fixed header to align with content in the main content of the page?
Here is my html (sorry if its messy, I've only been at this a week or so):
<body>
<div id="header">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Here is my CSS, I left the logo image out and in place is just a beige block:
body {
margin: 0px;
background-color: darkgray;
}
#header{
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
width: 960px;
margin: 0px auto;
height: 1000px;
background-color:gray;
}
#footer{
width: 100%;
height: 100px;
background-image: url("images/bg-header.jpg");
}
Any advice?
Thank-you
Add an inner wrapper to your header HTML
<body>
<div id="header">
<div id="header_inner"><!-- inner div -->
<div id="logo">
</div>
<div id="nav">
</div>
</div><!-- end inner div-->
</div>
<div id="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
Then add the same width styling as your container to the wrapper:
#header_inner{
width: 960px;
margin: 0px auto;
}
Then the main content and your header content will align.
Some side notes:
classes are always better than IDs for styling
fixed width are generally not a great idea if you're going for a responsive solution
For Fixed Header or Footer you can use
.header_class {
width: 100vw;
float: left;
position: fixed !important;
top: 0px;
background: url: ('images/img.png') no-repeat;
height: 100%;
}
another better suggestion you can follow facebook header css means upper blue section css (css class name: .fixed_elem, .fixed_always)
I had a little trouble understanding what exactly you were looking to do so I made this example which shows a full page with header and one contained within the middle content area. The main problem I saw was that when you do things like width:100% it doesnt do 100% it is allowed.. but the full width of the parent element. You can use width:inherit to get the max width allowed. Here is the example with a full white header width and one contained using black. Its all in how you structure the parent child DOM relationship structure
<!doctype html>
<html>
<head>
<style>body {margin: 0px;background-color: darkgray;}
header{background-color: white;height:100px;width:100%;}
#header{width: inherit;height: 100px;position: fixed;top: 0px;background-image:url("images/bg-header.jpg");opacity: 0.9;background-color: black;}
#logo {height: 100%;width: 300px;background-color: beige;}
#container {width: 960px;margin: 0px auto;height: 1000px;background-color:gray;}
#footer{width: 100%;height: 100px;background-image: url("images/bg-header.jpg");}
</style>
</head>
<body>
<header><div></div></header>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="nav"></div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
The easiest solution is to add a container inside the #header. Create a class .container that has the properties shared by the #container and this container. Also make sure that the container inside the #header gets 100% height.
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
body {
margin: 0;
background-color: darkgray;
}
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
background-image: url("http://placehold.it/100x100");
opacity: 0.9;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
}
#container {
height: 1000px;
background-color: gray;
}
#footer {
height: 100px;
background-image: url("http://placehold.it/100x100");
}
.container {
width: 960px;
margin: 0 auto;
}
#header .container {
height: 100%;
}
<div id="header">
<div class="container">
<div id="logo">
</div>
<div id="nav">
</div>
</div>
</div>
<div id="container" class="container">
<div id="content">
</div>
</div>
<div id="footer">
</div>
Basically you want to have a full width 100px header and footer which are fixed to top 0 and bottom 0. but at the same time you want the content to not exactly roll under the header and footer. I hope I understood the question here.
To achieve that obviously give position fixed to header and footer but now to get your content aligned right, you have to give a margin of the height of header and footer ( 100px)
Here is the code snippet... I have added different colors and some filler content to see the difference.
body {
margin: 0px;
background-color: darkgray;
}
#header,
#footer {
width: 100%;
height: 100px;
position: fixed;
left: 0;
background: blue;
opacity: 0.5;
text-align: center;
color: red;
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#logo {
height: 100%;
width: 300px;
background-color: beige;
float: left;
}
#nav {
height: 100%;
width: 450px;
background: cyan;
opacity: 0.5;
float: right;
}
#container {
width: 960px;
margin: 100px auto;
height: 1000px;
background-color: orange;
}
<div id="header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="container">
<div id="content">
content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>
</div>
</div>
<div id="footer">footer</div>
Hope this was what you were looking for.
I've had this problem many times before, where you want full width images, but they're in containers at a fixed width. At any rate there's a few things you can do here. You can add a container class to every section you want in a container; You put a mini-container in divs you want to break the rules, (this also requires taking said div / #header out of the main #container)
#header {
width: 100%;
height: 100px;
position: fixed;
top: 0px;
background-image: url("images/bg-header.jpg");
opacity: 0.9;
}
Than put a div inside of that called content, and set content up like this.
.content {
width: 960px;
margin:0 auto;
display:block;
}
So your markup/html should look like
<div id="header">
<div class="content">
<ul>
<li><a>Home</a></li>
<li><a>Other</a></li>
</ul>
</div>
</div>
There are more options, but these seem to make sense for this issue.
Hope This Helps,
-Alex
I have inherited a site with a div layout that I am not used to:
<html>
<body>
<div class="wrap">...</div>
<nav>...</nav>
<div class="wrap">...<!-- main stuff -->...</div>
<footer>
<div class="wrap">...</div>
</footer>
</body>
</html>
One of the pages has a small amount of content and so needs a sticky footer. Normally I would have used something like http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/ and set 100% etc etc in the CSS.
I don't really want to rewrite the structure of the site. Is there an alternative way to get the footer to the bottom of the screen while keeping this 'class of wrappers' structure?
You could wrap all your content first and leave the footer out of the wrap
<html>
<body>
<div class="wrap-all">
<div class="wrap">...</div>
<nav>...</nav>
<div class="wrap">...<!-- main stuff -->...</div>
<footer>
<div class="wrap">...</div>
</footer>
</div>
</body>
</html>
Then the styles:
html, body {
height: 100%;
}
.wrap-all {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.wrap-all:after {
content: "";
display: block;
}
footer {
/* .push must be the same height as footer */
height: 142px;
}
You can use the same CSS from the link you attached, just replace #footer with footer, because you already have element in your structure.
If there's more elements use something like body>footer.
So something like this (taken from the link you attached with just one modification):
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: #ee5;
}
And if you want to modify just footer .wrap div use footer>.wrap
I am trying to implement a sticky footer which has three divs stacked inside the footer div. Now if I load a page where I keep the content block empty, the footer is not sticky anymore :(. I was wondering what am I doing wrong?
CSS (Code Stripped to show only the relevant CSS):
/* Custom Sticky Footer */
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -553px; /* Should be -553 px, but somehow doesnot work. This is a hack */
}
.push,
.footer {
height: 553px;
}
.footer{
background-color: #fff;
}
#footer-margin-top{
height: 20px;
}
#footer-top{
background-color: #333333;
height:402px;
}
#footer-bottom{
background-color: #232323;
height: 131px;
border-top: 1px solid #444444;
}
And HTML (Code Stripped to show only the relevant divs):
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrap">
<div class="container">
</div>
<div class="push"></div>
</div>
<div class="footer">
<div id="footer-margin-top"></div>
<div id="footer-top">
<div class="row-fluid">
<div class="span12 social">
</div>
</div>
</div>
<div id="footer-bottom"></div>
</div>
</body>
</html>
JSFiddle
Just add
html, body { height : 100% }
see on cssdesk or jsfiddle
If I understand correctly with what you mean with sticky footer, then I suggest you to use this code :
.footer{
background-color: #fff;
position:fixed;
bottom:0; //set sticky on the most bottom of your pages
}
Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript?
<div id="wrapper">
<h1>Header</h1>
<div id="center">
<div style="height:1000px">high content</div>
</div>
<div id="footer">Footer</div>
</div>
Basically I want the header to be visible at the top and the footer to be always visible at the bottom and have a scrollable content in the center which occupies the remaning height.
The header, footer and center divs' heights are all unknown (no set px or %, i.e. variable font-size or padding). Is it possible with pure CSS?
2014 UPDATE: The modern way to solve this layout problem is to use the flexbox CSS model. It's supported by all major browsers and IE11+.
2012: The correct way to do this with CSS alone is to use display: table and display: table-row. These are supported by all major browsers, starting with IE8. This is not using tables for display. You'll use divs:
html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: table;
height: 100%;
width: 100%;
background: yellow; /* just to make sure nothing bleeds */
}
.header {
display: table-row;
background: gray;
}
.content {
display: table-row; /* height is dynamic, and will expand... */
height: 100%; /* ...as content is added (won't scroll) */
background: turquoise;
}
.footer {
display: table-row;
background: lightgray;
}
<div class="wrapper">
<div class="header">
<h1>Header</h1>
<p>Header of variable height</p>
</div>
<div class="content">
<h2>Content that expands in height dynamically to adjust for new content</h2>
Content height will initially be the remaining
height in its container (<code>.wrapper</code>).
<!-- p style="font-size: 4000%">Tall content</p -->
</div>
<div class="footer">
<h3>Sticky footer</h3>
<p>Footer of variable height</p>
</div>
</div>
That's it. The divs are wrapped as you'd expect.
A cross-browser solution derived from Dan Dascalescu answer:
http://jsfiddle.net/Uc9E2
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.l-fit-height {
display: table;
height: 100%;
}
.l-fit-height-row {
display: table-row;
height: 1px;
}
.l-fit-height-row-content {
/* Firefox requires this */
display: table-cell;
}
.l-fit-height-row-expanded {
height: 100%;
display: table-row;
}
.l-fit-height-row-expanded > .l-fit-height-row-content {
height: 100%;
width: 100%;
}
#-moz-document url-prefix() {
.l-scroll {
/* Firefox requires this to do the absolute positioning correctly */
display: inline-block;
}
}
.l-scroll {
overflow-y: auto;
position: relative;
height: 1000px;
}
.l-scroll-content {
position: absolute;
top: 0;
bottom: 0;
height: 1000px;
min-height:100px;
}
<div class="l-fit-height">
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Header</p>
</div>
</section>
<section class="l-fit-height-row-expanded">
<div class="l-fit-height-row-content l-scroll">
<div class="l-scroll-content">
<p>Foo</p>
</div>
</div>
</section>
<section class="l-fit-height-row">
<div class="l-fit-height-row-content">
<p>Footer</p>
</div>
</section>
</div>
Using overflow:auto will let you do this.
demo
So what you are talking about is a sticky footer. I went and did some more research and here is what I have for you.
<div id="wrapper" style="height:100%">
<div id="header" style="float:none;"><h1>Header</h1></div>
<div style="overflow:scroll;float:none;height:auto;">high content</div>
<div id="footer" style="clear:both;position:fixed;bottom:0px;"><h1>Footer</h1></div>
</div>
This will give you a sticky footer. The key is position:fixed and bottom:0px;
Unfortunately this means it also hovers above any content in the scrollview. So far there seems to be only Javascript to figure this out but I will keep looking.