So I can't scroll down on my html page. I already thought of some things that might cause that but I still don't how how to fix it. I have a footer that is sticked to the bottom of the side and all the content is behind that footer. Some guy told me just to add body {padding-bottom: "height of footer"} but that doesnt work for me because my footer changes height if the screen res is something different.
My guess is your footer is position absolute or fixed(or something of the sort). This allows your footer to be displayed at all times, but other elements on the page will have no awareness of this (thus are hidden behind).
So you have 2 options:
option 1: allow footer to not show at all times, and
use something like css flex, where you can define your elements so that the middle content has flex-grow. (and likely some padding too)
option 2: add some sort of padding to the main content so that it leaves room for the footer.
If you can't be certain of the footer's size, you can always put in some restraints on your footer and have the maximum height be accounted for by your content. that way you will always be able to see all your content, worst case scenario you get extra white space.
ex: If your footer can be up to 20vh high, you can set the content to have a vh of 120. (You can also use padding or margins, whatever works)
Related
I have a div of unknown height (it loads dynamically based on content). It is floating to the right. I have a footer that I want to have go after that (also a div) that would just fill the entire width of the page. However, because the other element is floating, the footer does not appear at the bottom. Is there any way to resolve this using divs?
For your css styling you can use clear:both before the footer which will sometimes fix it.
There are a lot of different ways to do footers, if what you're doing doesn't work for you.
Since it can be a pain to get footers to stay at the bottom, I like to make my background-color of the page whatever I want my footer to be, and then have a <div> of all my content on top of that. Then after the content I can put whatever text I want in my footer (in another <div>) and it always appears like the footer is at the entire bottom.
You can get more fancy with the stylings of course. Hope this helps!
I'm sure there is a simple solution for this, but I might have just been looking for it for so long that I'm overthinking everything.
Please see http://codepen.io/anon/pen/fusiw
I have an absolutely positioned div on my page (for simplicity, it's 0 from all edges in the codepen). Inside, there are three main elements:
a header, which can be of any height depending on content, and should always be fixed to the top of the parent;
a footer, which, thankfully, has a fixed height, and should always be fixed to the bottom of the parent;
and a middle area, which can have any amount of content, should span from the end of the header to the start of the footer, and is supposed to scroll if needed.
My problem is getting the middle area to always begin from the end of the header, and end before the footer. It's supposed to exactly fit whatever height is left between the header and footer.
I don't want scrollbars appearing anywhere else than on the middle area itself. My current solution is working in the sense that only the middle area scrolls, but because I am using height: 100% for it, the height of the header is added to it, which shouldn't happen.
I have situation like in following example (see in chrome):
http://jsfiddle.net/3fLP6/49/
There are div rows with some content and one div with variable content which should fill rest of available height. Everything works fine in Chrome/Firefox/Safari/Android/iOS but I cannot find solution for IE (I need solution for IE7+) is there any other way to acomplish this in IE?
I assume you mean that you want a header that always sits on the top, a footer that always sits on the bottom, and one div that fills the rest of the available space; no matter how small or large its contents are. I use these terms in the rest of my answer.
Well, there are to my knowledge three methods to do this in IE7+:
Use the position: fixed CSS property to position the header, footer and the body. This means you have to set the header to a top position of 0 pixels and the footer to a bottom position of 0 pixels. Furthermore, you have to set the top and bottom property of the body div to the height of the header and footer respectively. Consequently, this method requires you to know the exact height of both the header and the footer. Unfortunately, some older browsers (e.g. IE6) don't support position: fixed, so if support for those browser is important, you should go with one of the other options;
Use percentages to specify the height's of all the div's. Clearly, this is quite easy. However, if you want to set a specific height for the header and footer, that isn't possible;
You can also create a div width a height of 100% which will act as the body div. On top of that you position the header and footer div's using position: absolute (because of that, this will also work in older browsers). Then, you add to the body element two other elements: one div at the top and one div at the bottom. These div's have to be the same height as the header and footer respectively, because these two elements will make sure that the scrollbar is showed when necessary. Of course, you'll need to set overflow: auto on the body div;
Finally, you can also change the height of the body div using JavaScript when the window is resized. A big disadvantage of this method is that JavaScript is required, and therefore this wouldn't be my choice.
I hope I helped. Please ask any question if I wasn't clear (enough).
I'd like to do the following with HTML5 / CSS3 (full browser compliance would be nice, but not totally necessary - I'm testing with firefox 4b12, safari and chrome so far):
I have the following html structure:
<div id=contentwrapper>
<aside>
<div id=child1></div>
<div id=child2></div>
</aside>
(<div id=maincontent></div>)
</div>
What I want to do is the following:
contentwrapper is set position fixed, top 20, bottom 20px (= use all space between a fixed header and footer).
aside is set to 100% height (use all space of content wrapper!)
child1 has variable content (potentially changed by CSS- or DOM manipulation by user interaction), so it's height is set to auto to adjust it's height accordingly.
child2 has also variable content. but I want this div to use all available vertical space that is left within the aside and that is not occupied by child1. If it's content needs more space, there is a overflow:auto to make a scrollbar if necessary.
The whole column is followed by a main content area that is floated right. this should not be relevant to my problem though.
what I tried so far:
I can't set child2's height to auto or 100% or a fixed value (could be to large, no scrollbar, don't know users window height, ...).
I can't use position:fixed and top+bottom values, as this does not looks at child1, but renders relatively to aside.
I can't use display:table, as the elements do have borders/formattings that don't apply to table cells.
I hope you understand the problem, and maybe have a smart solution ...
Edit: here is a screenshot of my problem:
In view 1 you can see what happens at the moment when viewport is high enough.
In view 2, there is not enough space, and child2 slides down under the footer ...
what I'd like is to that child2 takes all it can get in height, but scrolls its content.
thanks for your help
sebastian
If you set child1 to float:left and child2 to height:100% and both of them to width:100% I think that will achieve the effect you're after.
Something like this?
I have just finished redesigning this site (www.imustsolutions.co.za) and I have a problem with the header and the footer when the user zooms in (Cntrl + in FF).
Here is the problem:
The background color of the footer/header does not paint to fill the rest of the screen (horizontally) when the user zooms in.
What am I doing wrong?
Here is the site again: www.imustsolutions.co.za
Thanks in advance.
Regards,
M
The problem is that the width of your header is set to 100% (100% of the original browser window), whereas your main content is set to 980px.
So when you are on a full size mode, 100% will be greater than 980px, but on resizing or zooming in 100% will become less than 980px and your header will break whereas the main content will overflow to the right, if need be.
Setting a min-width for both the header and the footer to the same value as the width (plus the padding and margin if any) of the main content is usually enough to fix such issues.
With regard to your site, as it seems your main content is set to 980px you may then try:
#header {min-width:980px;}
That's basically how it's supposed to work. The width of a block-level element is determined by the width of its containing block. And the width of the initial containing block (i.e. the containing block of the html element) has the dimensions of the "viewport" (i.e. the browser window).
In other words, unless you've explicitly set widths on your blocks to make them wider than the viewport, they'll never be wider than the viewport.
You can see the same thing happening on the footer of StackOverflow itself too, for example: if you zoom in on this page until you get a horizontal scrollbar and then scroll sideways, you'll see the gray background chopped off too.
One way you could fix this is by turning the entire page into a float, since the width of floating elements shrinks to fits the dimensions of its contents and isn't contrained by the dimensions of the viewport.
Simply adding float: left to the html or body tag should do the trick. I haven't tested that in all browsers, though.
Your header and footer DOM element should be placed within main content. So your header 100% will be limited with main content size:980px