When master page parsed content div always is at the very bottom. So how i can set footer to be at the bottom while not using position absolute. If you use position absolute you have to set every different page height and footer position according to the this is which i don't want. Thank you.
The most practical solution is to set a min-height in your CSS of around 700px for the main content area between header and footer.
Alternatively, you could try this (but not tested yet in modern browsers):
http://codersbarn.com/post/2008/09/10/CSS-Sticky-Footer-for-ASPNET-Master-Page.aspx
This is something I needed to implement recently on a project.
Checkout the following jsFiddle: http://jsfiddle.net/uHZgY/
Edit (Based on comment)
If what you require is a floating footer, then checkout this other SO question: How do I get a floating footer to stick to the bottom of the viewport in IE 6?.
The correct answer implements this without the need for absolute positioning of the main content.
I have taken the correct answer and created a jsFiddle for you so you can check it out.
http://jsfiddle.net/mStef/
Related
Not sure if this is the appropriate place to ask this, if not, where? It is a code question, but the code is on a website and hard to paste here.
I'm looking at M&S's mobile site, and their slide in menu system to be specific. If you go to http://www.marksandspencer.com in Chrome, open the dev tools and use the device toolbar, it should display as if on a mobile device.
The menu is series of div's inside a nav. The div's are position: absolute;, but somehow the content doesn't get cut off at the bottom, the page expands to the height of the menu, even when it's way past the bottom of the footer.
Obviously positioning an element absolutely takes it out of the normal flow, and so would be cut off at the bottom of the footer.
Can anyone see how they've managed to achieve this..? That is, having their absolutely positioned div's not cut off. I can't see any manual setting of a height property anywhere.
Update
To see the effect, go to the home page, set the viewport width to about 500px, then open the menu, clicking on 'Men' then 'Clothing'. This leads to the menu being higher than the content of the page.
Looking at the div with classes mcp-nav-primary__submenu-container is-active you can see it's position: absolute;.
I'm not asking for someone to write code for me.
I'm asking if anyone can see how M&S have achieved this effect..?
You learn something new every day. Apparently nothing has to be done to achieve this. The window expands by itself. Note however that the height of the body and html does not expand. And if you set overflow: hidden on the body it is cut off as you expected.
See this fiddle: https://jsfiddle.net/uhqtk13a/
I'm looking to figure out the z-indexing for the floating social bar at this link (scroll down the page for it to show up):
http://dailycaller.com/2013/01/25/herman-cain-explains-why-he-wont-run-for-georgia-senate-seat/
Currently, the way that I have the containing div set, in order to be in the fixed position to the side, is at 100% with a fixed div. This is covering the content so the links in the content are not target-able.
The problem is the facebook like button. How do I get the z-indexing set correctly so that the facebook box shows up on top but the hyperlinks in the content are target-able?
Thanks.
You could perhaps set the width of the sidebar container instead of making it 100% and then make use of
overflow: visible;
Example: http://jsfiddle.net/CFCDS/3/
(excuse my margins—they are just there to get everything to look a bit more like you had it.)
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example
Actually I don't know how to find solution to this problem and how to name it.
Here's the link to my site:
http://www.portalpraktyk.pl/podstrona_itp
The problem is that I have page divided into 3 standard parts: top, content, footer. Between content and footer there's also facebook div to put social plug-in. What happens is that content of both divs (facebook and footer) stays under content div, but both divs actually goes up to content area (you can see dark background div right under header and behind content div).
I won't show you a code, because I don't know where the problem is. The best way is to check how this is written with web developer and firebug browser plugins.
Does anybody know solution to this problem?
Your problem is a classic problem of floats not clearing.
Look for information on .clearfix.
Basically the div#contents, has a height of 0, because #box_left and #box_right are floated, so div#contents is not containing them, and because of this your page gets all messed up.
Another tip is that instead of using position:relative and asigning a top:30px value, use margin-top:30px.
You need to clear your floats right after your #content div closes.
I'm trying to create a floating header. content area and then a sticky footer.
http://jsfiddle.net/9vB5m/ it seems to be working here
http://jsfiddle.net/9vB5m/2/ covers up the footer....
Not sure why. Once i get this working. I'm then going to try to use this on my real layout.
Had to set css margin-bottom property for footer to 0.
Working code: http://jsfiddle.net/9vB5m/4/