So I wanted a sticky footer on a page and got this one to work for me. All is well, but no, not really..
The problem is that I wanted the content above the footer to stretch all the way down to it. Now the box containing the main content end just after the text in the box, and there's a large space between the footer and the content. What I want is the background of the main content to stretch down to the footer!
See my beautiful image!
This is what I have right now in html:
<div id="wrap">
<!-- start header -->
<div id="header">
<div id="header-content">
</div>
</div>
<!-- end header -->
<!-- start main -->
<div id="main">
<div id="main-content">
</div>
</div>
<!-- end main -->
</div>
<!-- start footer -->
<div id="footer">
</div>
And in css:
html {
height: 100%; }
body {
height: 100%;}
/* wrap */
#wrap {
min-height: 100%; }
/* main */
#main {
background-color: #43145c;
overflow: auto;
padding-bottom: 50px; }
#main-content {
width: 720px;
margin: auto;
background-color: #643280;
padding-top: 20px; }
#footer {
position: relative;
margin-top: -50px;
height: 50px;
clear: both;
background: red; }
I tried setting min height of main to 100%, but didn't work. I just want the backgroundcolor of main-content all the way down to footer, since it's different to the body and main box.
Does it make any sense? Can anyone help?
I know this was asked 6 months ago, but I've been searching for the solution to this problem for quite a while now and hope other people can benefit from the solution I employed being archived. You were spot on when you said that somehow the main box needs to get the min-height of the space between the header and footer.
Unfortunately, I don't know how this can be done with pure CSS, it's quite easy with javascript of course but that solution is not always viable, and it's kind of messy in terms of code separation. The good news is that depending on what you need to do, there is a CSS hack you can employ.
What I did was add an absolutely positioned element below body that essentially stretched from below the header to above the footer.This way I could add a background or a gradient on this #divBelowBody that essentially allowed me to pretend this problem is solved (although this solution leaves a bitter taste in my mouth).
In addition, if you wanted to add a border around your content div and were hoping that it extended to the footer even when content was small, you're screwed (although not really, I can probably think of a hack or two to make this workable), so it only works if you were hoping to add a background or gradient etc.
You can see the code in action here:
http://jsfiddle.net/qHAxG/
Expand the result section horizontally to more clearly see what's going on.
Try this:
Replace your HTML and BODY Styles in the Style Sheet with this:
html,body {height: 100%;}
Then replace your "wrapper" with this:
#wrap {
min-height: 100%;
height: auto;
}
Hope that helps.
Try this
HTML
<body>
<div id="wrap">
<!-- start header -->
<div id="header">
<div id="header-content">
</div>
</div>
<!-- end header -->
<!-- start main -->
<div id="main">
<div id="main-content">
</div>
</div>
<!-- end main -->
<div class="push"></div>
</div>
<!-- start footer -->
<div id="footer">
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
/* wrap */
#wrap {
background: green;
height: auto !important;
margin: 0 auto;
}
#wrap,
#main,
#main-content {
margin-bottom: -50px;
min-height: 100%;
height: 100%;
}
/* main */
#main {
background-color: #43145c;
}
#main-content {
width: 720px;
margin: 0 auto;
background-color: #643280;
}
.push, #footer {
height: 50px;
}
#footer {
position: relative;
background: red;
}
see THIS demo: it might be of use. It seems like you want a div with a background color to stretch to the bottom. But the problem with the sticky footer is that it stays at the bottom also - get's out of your way when the content extends past the view-port. So It needs some distance ( height of the content ) to know how when to do that. If that height isn't designated by actual content... 100% isn't really going to do the trick either. because then the "sticky" footer doesn't really work... it would be off the screen. What is it really 100% of ?
this whole thing has frustrated me for a year... but I always find a way to make it look the way I want even if I can't get it to function the way I want... hopefully that link demo above will maybe lend another piece to the puzzle. Good Luck !
Related
I'm building an angular application that frequently uses nested views. Certain views, however, are taller than the other elements on the page and end up extending well beyond the end of the parent view.
I'm using Ryan Fait's Sticky Footer so I have a wrapper around a containing div set to height:100% and I would have expected the page to just adapt and move the footer to the bottom of the nested view however I'm seeing the style elements of the footer border and background-color are remaining at end of the parent div while the content of the footer is being pushed to the end of the nested div.
Including an image as I'm struggling with getting the language exact:
I'm really looking for any solution from fixing the css to something that seems hackier like changing the footer or using ng-if/ng-class on certain pages. I'm imagining I'm misunderstanding something about CSS/UI-Router but I can't really track it.
The code isn't really interesting but here is it?
CODE
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.push {
height: 50px;
}
.footer {
display: block;
height: 50px;
}
.nested {
max-height: 500px;
}
<body>
<div class="wrapper">
<div>
<h1>Some text</h1>
<ui-view class="nested"></ui-view>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<span>some copy</span>
</footer>
</body>
If you use percentage values for height (i.e. a relative height), the parent element heights have to be defined too. In your case you also need height: 100% on body and html, like
html, body {
height: 100%;
}
I have been banging my head against the wall trying to figure out this problem and I have looked high and low for the answer and came up with similar results.
Synopsis
The problem is that I am building a website using the 960 grid and have three columns that I want to stretch at 100% at all times. Here is a fiddle for your reference: http://jsfiddle.net/Uec7h/1/
Essentially the html is like so:
<div class="contentWrapper">
<div class="container_12">
<div class="grid_2 leftSide clearfix">
Left sidebar content.
</div>
<div class="grid_7 content">
Lots of content loaded from the server.
</div>
<div class="grid_3 rightSide">
Right sidebar content.
</div>
</div>
</div>
with the CSS being like
html, body {
height: 100%;
}
.content {
height: 100%;
}
.leftSide {
height: 100%;
background-color: #000000;
}
.rightSide {
height: 100%;
background-color: #000000;
}
.contentWrapper {
height: 100%;
}
The fiddle isn't completely accurate to what I am seeing on my local version, but it's close. Seems like the left and right sidebars do not want to expand to 100% no matter what I do.
What I've Tried
Most of the answers I have found on SO have suggested to put height: 100% on the html, body elements and everything should work out fine. Adding this attribute and giving both sidebars height: 100% did work a little bit, but if the content in the middle column gets too big, it stops at a certain point and won't continue to stretch.
I have tried adding the clearfix class that comes with the 960 grid but it didn't seem to help at all.
Question
How do I get the left and right side bars height in the fiddle to be 100% no matter what content is in the middle column?
If you add the following CSS to the sidebar elements it will fill the 100% of the height.
display:block;
height:auto;
position:absolute;
top:0px;
bottom:0px;
If you place the sidebar into a wrapper div with relative positioning, the content section will be again in it's right place...
I would also set padding and margin to 0 for the body.
EDIT:
If you add height: 100% to the .container_12 it will get a real height, and children elements can have a 100% height. Notice that the sidebars will be as height as the window itself, but your content at the middle can be taller than 100%... Fiddle
Dont know the 960 grid, the EDITED solution - using visibility: visible; -
HTML
<div id="box">
<div class="vision"> sdfsdfsd </div>
</div>
CSS
#box {
float: left;
border: 2px solid red;
}
.vision {
width: 300px;
height: 600px;
visibility: visible;
}
My website here is a wordpress website but I believe the only thing I need to fix for an issue I'm having is the header height. The home page as a rotating banner which is 403px high and then all other pages have a header image of 303px high. I'm just trying to get the header height to be auto so the #container will automatically hug the bottom of the banner no matter it's height.
CSS
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
What else should there be so the #container realizes that the header is there?
UPDATE:
NEW HTML
<div style="clear:both;"></div>
</div><!-- end of container-->
NEW CSS
#banner {
width: 960px; /* same with already defined */
height: 403px;
margin: 0 auto;
}
The only thinkg i did slightly differently was place the navigation under the header instead of the banner as it was underneath the banner of which i don't want. It looks the same however the doesn't seem to be doing anything differently then what I had previously. I still have that gap on the blog page under the banner.
I appreciate the help Zuul. I do think I have a bit more to go and then we can figure this out. Thanks!
The issue with the layout doesn't lay over the header tag, there are some elements positioned weirdly that are causing several problems:
This is a list of things to do in order to rectify the layout flow:
1)
Remove the <div id="banner"> from within the <nav id="main-navigation">.
The <nav id="main-navigation"> is set to height:70px and the slider is far taller than that.
Place it as a child of the <header> or after the <header> and before the <div id="container">.
e.g,
<header>...</header>
<div id="banner">...</div> <!-- here is better -->
<div id="container">...</div>
2)
After the first step, you can then remove from your #banner the following CSS:
REMOVE
#banner {
left: 50%;
margin-left: -480px;
position: absolute;
top: 69px;
width: 960px;
z-index: 1;
}
ADD
#banner {
width: 960px; /* same with already defined */
height: 403px;
margin: 0 auto;
}
3)
The step 01 and 02 should fix the #banner position along with the header height issue.
Now remains fixing the #container that contains floated elements and should be cleared at the end.
Here, your current class clearfix will not work, contains to many declarations, I would suggest:
<div id="container">
<div id="main">...</div>
<aside>...</aside>
<div style="clear:both;"></div>
</div>
Adding that new <div style="clear:both;"></div> at the very end of the #container will allow the float to be cleared and the document flow to resume normally.
EDITED
First phase is done, now the only thing you need to do is to remove the height from the #banner, and the gap will go away.
#banner {
width: 960px; /* keep this */
margin: 0 auto; /* keep this */
}
add a div with a style of clear:both just before your container div ends. This will allow to make the container div's height according to the contents inside it. You can make a class named clear and inside it you can put this style so that you can use this class anywhere in your website.
I found a lot of questions on stack overflow about getting rid of white space, but I can't seem to figure out how to put it in.
I have a bottom navigation on my site that floats with the page, but if the window is small, the bottom part of the page gets covered up. I would like to insert some white space at the bottom, so when the window is smaller than the length of the page you can still read it.
I've tried adding:
margin-bottom: 50px;
padding-bottom: 50px;
to the div containing the top page content, but it doesn't work.
Is there something I am missing? Here's a demonstration: http://www.writingprompts.net/name-generator/
#left, #right {
margin-bottom: 90px;
}
or
#top_section > div {
margin-bottom: 90px;
}
It doesn't work on #top_section because you use absolutes and therefore the content actually over extends the div itself, but trust me, either of those two css' i gave you WILL work
Simply add the following rule:
#top_section {
overflow: hidden;
padding-bottom: 90px;
}
This will make #top_section be as big as the floating content inside it.
http://jsfiddle.net/rlemon/fSYmu/ This is a simplified example, having no idea what your layout looks like (I am not going to assume the demonstration is yours... unless you revise and tell me it is) i'll show you how I would do this
HTML
<div class="container"> <!-- main page wrapper -->
<div class="content"> <!-- main content wrapper, backgrounds apply here -->
<div class="inner-content"> <!-- content inner, where your content goes! -->
content
</div>
</div>
<div class="footer">footer</div> <!-- footer -->
</div>
CSS
html,body,.container {
height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is.
}
.content {
height: 100%; // see above... i need to cascade down.
background-color: green;
}
.content-inner {
padding-bottom: 100px; // offset for the footer.
}
.footer {
width: 100%;
position: absolute; // stick me to the bottom.
bottom: 0;
height: 100px;
background-color: red;
}
enjoy!
You need to use fixed position in CSS to achieve this.
HTML:
<div id="top-section">
Insert content here...
</div>
<div id="bottom-nav">
<div id="content">
Bottom content...
</div>
</div>
CSS:
#bottom-nav {
bottom: 0;
position: fixed;
width: 100%;
}
#content {
margin: 0 auto;
width: 960px;
}
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.