So, I've been stuck with this problem for a while now and I can't seem to find a solution.
I'm trying to make a layout consisting of (for now) 4 different content areas like so:
What I'm trying to do
I'm trying to do the following things:
Simple explanation: Content should be the only scrollable thing on the page, with the footer following right behind it if content fits on the page, fixed on the bottom otherwise.
Detailed explanation:
Fix banner and mainMenu so that they never move when page is scrolled.
Make the content scroll with a page so that:
If the content (and footer) fit on a page, no scroll is displayed.
If the scroll is needed, content goes behind the banner (not being shown) and does not appear again above it.
If the scroll is needed, content can scroll until the bottom line of it and the footer are in the visible area.
The footer should do two things:
If content and footer fit on the page, footer should stick at the bottom of the content
Otherwise, footer should be fixed on the bottom.
What I have tried
Fixing banner,mainMenu and the footer are fixed using position: fixed (and positioned accordingly). Parent div has overflow: hidden (which doesn't seem to work).
<div id='main'>
<div id='banner'>banner</div>
<div id='mainMenu'>mainMenu</div>
<div id='content'>.. some long content ..</div>
<div id='footer'>footer</div>
</div>
And
#main {
width: 960px;
height: auto;
margin: 40px auto;
overflow: hidden;
}
#main #banner {
width: 960px;
height: 100px;
position: fixed;
}
#main #mainMenu {
width: 230px;
height: auto;
display: inline;
float: left;
position: fixed;
top: 140px;
}
#main #content {
width: 720px;
height: auto;
display: inline;
float: right;
margin-top: 100px;
}
#main #footer {
width: 960px;
height: auto;
clear: both;
position: fixed;
bottom: 0;
}
The Problem
Footer does not follow content if it fits within the area
Content overflows on the top of banner
I would really prefer to do this just in CSS (if possible) and as compatible as possible (IE7+, all other major browsers).
It's really getting frustrating now.. Any help would be appreciated.
There is no conceivable way I can think of that would solve your problem by just using css. Once you have set your elements to a fixed position they are out of the flow and thus your other elements cannot conform around them.
However I did find a solution by doing two different things. For the header issue I simply added another fixed element above the main banner and set it to the color of the background. This way the content will scroll behind it and look as if it is hidden. For the footer, I set up some javascript using jQuery to see if the content overflows or not. If it does then the footer's position is set to fixed, otherwise the position is set to relative.
You can check it all out here in this demo: http://jsfiddle.net/mrQGh/4/
To test out the javascript simply delete the text until there is no more overflow and run it again.
Related
As mentioned in the title, here are the requirements:
a footer that must always be at the bottom of the viewport (no pushdown)
css only
height based on the content of the footer (variable)
somehow prevent overlap of the main content element - when scrolled down
no tables
header
content
footer
if you remove any of the requirements, I know how to do it, but not with all requirement intact.
does anyone know a solution?
To put the footer on the bottom you can use a variation of the following:
.some-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%
}
The problem with this is that the main content will be behind the footer and you won't be able to scroll it up. And you can't just put a padding-bottom on the content because you don't know the footer's height.
I would recommend putting a duplicate of the footer after the content, but this one with position: relative, and with opacity: 0. This way you can always scroll until all the content is visible, independently of the footer's height.
This should work as you want! :) It will always be at the bottom of the page.
This will always be at the bottom of the viewport, NO MATTER WHAT! :D
#footer{
height: auto;
min-height: 100px;
width: 100%;
background-color: blue;
bottom: 0px;
position: fixed;
display: block;
z-index: 100000;
}
<div id="footer">
</div>
My website works on a 15 inch laptop, but whenever I resize the browser, some of the information on my website 'disappears', as I am unable to scroll (scrollbar won't appear).
I'm experiencing this problem for two of my websites (they're part of a school project).
On the first website, the sticky footer covers the content when the website is being viewed in a smaller browser window. I managed to get a scrollbar for the container part (everything except for the header and footer), but I need the scrollbar to appear on the very right side of the website, outside of the container. (only the footer will be fixed, the header will be scroll-able as well).
http://sophisticateddesign.nl/cfreport/index.html
On the second website, I need the header and butterfly to stay fixed and for everything else to be scroll-able.
http://sophisticateddesign.nl
I'm wondering if there's an easy solution as I don't have much time left for these websites to finish..
Remove overflow: hidden in html
html {
height: 100%;
margin: auto;
width: 960px;
}
Remove position: absolute for .Wrapper
For second site:
You added your main content inside header with position: fixed; height: 50px;. It's the problem.
Yeah I just tried this out if you need something to overflow the sides you should use
html{
overflow-x: hidden;
}
instead of using just overflow.
|| For anyone who encounters this problem in the future. ||
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
Try changing overflow to overflow: scroll
You have these CSS properties to your HTML tag.
html{
height: 100%;
margin: auto;
width: 960px;
overflow: hidden;
}
<div id="main" style="overflow:hidden;height:80%;>
<div id="header">
</div>
<div id="content" style="overflow:hidden;">
</div>
</div>
I have two divs in the main div, and I want the content div to fill up the remainder of the main div, but if stuff fills up the content div past its filled up height, I don't want the content div to grow any taller.
I've seen some other stackoverflow questions like this, but none of the answers have worked for me. Tried: Make DIV fill remainder of page vertically?, Get CSS Div to fill available height, and How to make a DIV fill the remaining vertical space of the browser window?
I think the main difference is that I require the content div to fill up, but ALSO not overflow. Is this possible with only css?
Update:
I kept trying out different pieces of code and this is what I want: http://jsfiddle.net/zXnnp/. But for some reason I couldn't replicate it on my localhost. And then I found out it was because I was using http://jamesflorentino.github.io/nanoScrollerJS/ And for some reason class="nano" on the content div messed things up. Still investigating on what's wrong.
Update2:
class="nano" has height:100%; so I just overrode it with height:auto; and things are now fine. Thanks for all the help!
You could do something like this:
/* stretch the body to full height */
body, html {
height: 100%;
}
/* stretching the containers */
#header {
height: 50px; /* just a random number i chose, not sure what you wanted here */
}
#content {
height: 100%;
margin-bottom: -50px; /* same as the header height, but negative */
}
You can see the code in action here: http://jsfiddle.net/mRK24/
The magic lies in first stretching you body to viewport height. The #main will then become 80% of the viewport height. Next you give the header some fixed height, and the content you set to a height of 100%, with a negative margin bottom that is the same as the height of the header.
Note that some of your content will be lost, due to the overflow:hidden;. Strange, cause you can not know how much since you don't know the height of your user's viewport. Perhaps you should consider setting the overflow of the content to scroll, cause I can't imagine you would want part of you content to be invisible.
Have you tried using the CSS property max-height? This is from CSS 2 and should not have any compatability issues.
http://www.w3schools.com/cssref/pr_dim_max-height.asp
If you post some editable code then we could play with it and help you find some ways of making it work.
I'm not exactly sure what you're after, but maybe this will get you close:
http://jsfiddle.net/isherwood/TCVvn/1
#main {
height: 80%;
width: 80%;
position: absolute;
}
#header {
height: 50px;
position: relative;
top: 0;
}
#content {
position: absolute;
top: 70px;
right: 5px;
left: 5px;
bottom: 5px;
overflow: auto;
}
<div id="main">
<div id="header">Header</div>
<div id="content">Content</div>
</div>
Keep overflow:hidden on <div id="#main"> and let the content div take as much height as it wants with no overflow restrictions. #main will cut off #content if it gets too tall to fit inside of #main.
I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.
Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)
Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)
I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?
Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.
So you want:
A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
The main content at the left which is vertically scrollable by the browser's main scroll bar,
A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.
See this demonstration fiddle which does all that.
The style sheet:
html, body, * {
padding: 0;
margin: 0;
}
.wrapper {
min-width: 500px;
max-width: 700px;
margin: 0 auto;
}
#content {
margin-right: 260px; /* = sidebar width + some white space */
}
#overlay {
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
#overlay .wrapper {
height: 100%;
}
#sidebar {
width: 250px;
float: right;
max-height: 100%;
}
#sidebar:hover {
overflow-y: auto;
}
#sidebar>* {
max-width: 225px; /* leave some space for vertical scrollbar */
}
And the markup:
<div class="wrapper">
<div id="content">
</div>
</div>
<div id="overlay">
<div class="wrapper">
<div id="sidebar">
</div>
</div>
</div>
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.
I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.
Update
If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
I think this new demo fiddle does what you want:
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
I misunderstood your question. I thought you wanted the main scrollbar to also scroll stuff in another div. Well, here you go:
$(function(){
$(document).scroll(function(){
$('#my_div').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
Demo: http://jsfiddle.net/AlienWebguy/c3eAa/
You can do this with position:fixed. The relevant part from GIZMODO's stylesheet:
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
This technique is seen on lots of websites today. What they do is give position: fixed to the div on the right side of the screen, so it is not affected by the page scroll.
CSS:
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML:
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
I assume you are looking for something like this.
http://jsfiddle.net/RnWdh/
Please notice that you can alter the width of #main_content as you wish, as long as it doesn't go "behind" your fixed menu as your text will disappear.
The trick to get the fixed menu to the right in your centered container is using left: 50% and margin-left to adjust it correctly.
For example. You have a container-width of 960px, and fixed menu width of 300px, with left: 50%, there will be a white space of (960/2 - 300 = 180) to the right of the fixed menu. Then just adjust it with margin-left: 180px;
One way to "center" the page (i.e. content + right panel) is to adjust the margins while making the right panel fixed position. So, if you have a div#content and a div#rightPanel, the css may look something like:
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel's width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
Just make sure that the left margin of #content is the same as the right margin of #rightPanel.
Here's an example: http://jsfiddle.net/william/ZruS6/1/.
I know this has been discussed here many times, but none of the answers I found here, seem to address my problem.
I have this variable (in height) layout, and wnat the footer to always stick to the bottom.
I have used the min-height: 100%; to the container div, and got it somehow to always be in the bottom. trouble is, it's sinking too low to the bottom.
I've put an example here:
http://jsbin.com/erono3
As you can see, my footer is at the bottom, but will go too far in the bottom, and even though there's space on the page to display it, it's creating a scroll bar.
Also, I'd like the main container to to be shown as big as the content is (i.e. closing the square), but right now, it looks like the container is going all the way to the bottom, and my footer is covering it.
What am I doing wrong there?
Thanks in advance
You should take a look at the link by Ben Lee again :). I have used that in your layout to achieve the effect you want. See it here: http://jsbin.com/erono3/2
The important thing is for the footer to be part of the container. The container has a min-height of 100%. So it occupies the whole screen always. The header is normal what ever it is inside.
Then you should have an inner container element (important), where your main content resides. In the link above, it has the id #body. This would have a padding-bottom (to give space to the footer.
The footer is absolutely positioned with a bottom:0px meaning it is always going to be at the bottom of the container (the container has to be position:relative).
EDIT (in response to the comment)
To make your footer span the entire page, but keep everything else centered, just do this:
remove the width off of the #containter, #container spans the whole page. Provide a width to the #body element in the link above and center it, using margin: 0px auto. You get the effect you wanted.
New link: http://jsbin.com/erono3/5
Here's a simplified version of this, which is worth reading for the explanation. See if you can adapt yours to fit.
CSS:
html, body, div {
margin: 0;
border: 0;
padding: 0;
}
html, body {
height: 100%;
}
#wrap {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background-color: #aaa;
}
and HTML:
<div id="wrap">
<div id="content">Stuff goes here.</div>
<div id="footer">FOOTER</div>
</div>
The problem is you have a min-height of 100% on your container div. That means that the container will be 100% the height of its parent, which is the body tag which has a height of 100%. So if your viewport is 600px, then your body will be 600px, then your container will be 100% of that which is 600px, and then it will stick the footer after the container div which is why it goes below the veiwport.
So one thing you can do is just absolutely position your footer inside the body. Do this by changing your position to be absolute, and bottom:0px. It will float at the bottom.
You might want to put it in your container as well depending on what style you are going for and position it absolute in that and at the bottom.
Your problem is not that the footer is too low, but by making the body 100% it pushes the footer below the bottom of the page.
Consider putting the footer div inside the container div and getting rid of the margin-top: -5.5em and position: relative and it will work just fine.
http://ryanfait.com/sticky-footer/
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
This is particularly for anyone using ASP.NET master pages but also in general, if your content is also wrapped in a <form> element you will need to change
html, body {
height: 100%;
}
to
html, body, form {
height: 100%;
}