I am soo confused right now. Coding really isn't my thing, so I believe that I messed up majorly somewhere which creates this problem:
I'm trying to make a sticky footer. The footer does stick--but only if I make my main content DIV (the white centered box) relative. I need the height of that DIV to stretch with the content (which will contain a PHP script that'll pull from my Wordpress blog--so naturally, I need it to adjust as necessary). If the DIV stretches longer than 500px, there's a weird two-scrollbars things going on, & I hate that. I like the relative DIV, but I would love to rid of all the extra scroll space, as well as making sure it stetches/regresses with content & the footer stays where it is.
I hope that's not too confusing. I'd just like someone to look over my source code & see where I'm going wrong. Thank you for any help.
http://www.missa.me/practice3.php
nice website :)
You need to make the footer fixed,
use this CSS
#footer {
position: fixed;
height: 80px;
clear: both;
background-color: #fff;
bottom: 0;
left: 0;
right: 0;
}
and take overflow: auto; off of #main
what this does is tell the footer to stay 'fixed' to the bottom of your viewport, so it will always stick to the bottom of your screen.. and taking overflow:auto; off will give your #main the natural ability to expand it's height depending on the content inside it.
Related
Please help me! Footer is not visible on my website.I tried on inserting "position: absolute; top: 50px; left:100px;" however it's not working. I am using HTML/CSS. Can someone fix this and help me.
Here is the link of my code:
https://code.sololearn.com/WzCJV6cF5ees/?ref=app
Use margin-top instead of top on your .contentarea - with margin-top: 450px it's moved down from its original position by 450px, but still occopies the orignal space and thereby overlaps the footer (which is not moved).
I have what seemed like a simple issue but cant quite figure this one out. I am using bootstrap version 3 to create my base layout. I have a footer that needed to be at the bottom of the page so i made it position: absolute; bottom: 0; and worked fine if I zoom out. When the content start getting lengthy it creates the vertical scroll bar and when scrolling the DIV floats around instead of staying at the bottom.
I tried giving the container a position: relative; but dosent seem to do anything. Would anyone have any ideas?
Heres an example of my layout, if you resize the preview section to force the vertical scroll bar you will see that when you scroll the DIV floats around instead of staying in place.
https://jsfiddle.net/DTcHh/10301/
try with fixed
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
js fiddle example
non-fixed, see the below:
your problem is (from what I gather) the footer is floating dependent on the content and and you want it to stay put where you call it.
.footerElement {
// base styles all styles
display: inline-block; // add this, does as you imagine
}
"Displays an element as an inline-level block container. The inside of
this block is formatted as block-level box, and the element itself is
formatted as an inline-level box" -W3schools
scrollbar, see the below:
As for the element that has a scrollbar resolving.
.elementwithScrollbar {
// base styles all styles
overflow:hidden; // or use overflow-y:hidden; or x
}
fixed, see the below:
If you want it to be fixed; adding position: fixed; and the value coordinates should all you have to do there. (ie. position:fixed; and where you want it)
"Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page." -MDN
Using fixed only anchors it to the bottom of the screen regardless of which part of the page you are viewing. I think you want to have the footer at the bottom of the page rather than constantly sitting at the bottom of the screen.
To fix, amend your spelling mistake here:
.contrainer-fluid { <-- should be container
position: relative;
}
http://jsfiddle.net/9fCfE/1/
.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}
Fixed div must be always on top and shouldn't cover the footer when I scroll.
100% height or from top to footer.
How can I do it?
The simplest answer is to drop the z-index of the fixed region so that when it would otherwise cover the footer, it instead moves behind it. You'll need to make sure the footer is position: relative;.
Fiddle example
If, instead, you want the two to never intersect, you're in for a harder challenge.
The best way to do it would to be giving your fixed element a fixed height, giving your footer a fixed height, and making sure that the fixed element height + the footer height <= the screen height.
Fiddle example
Those are really your only options - you essentially have to design around it. To the best of my knowledge, there is no way to dynamically shrink the fixed element when it intersects with other elements on the page (ignoring the rest of the elements on the page is the purpose of position: fixed, after all).
I've cobbled together a quick and dirty implementation of what you asked using jQuery, offset(), scrollTop() and height()
Here's the jsfiddle example.
Is this what you wanted? If so - why? :)
I don't see any visual difference between this method, and the one where the fixed element goes under the footer.
For some reason on this page using a mega drop down there is a giant white space below the all the content enabling you to scroll past the footer. Can you please help me figure out what is going on?
I'm quite certain it has to do with the mega drop down because when you hover over it the white space disappears. (menu item 'coop and career' is mega)
http://www.georgiancollege.ca/student-success/
Strangely, these two pages also use it and don't have the issue (some other styles are messed up on these two, but that doesn't affect it as I had them on the same theme/styles as the broken page and they still didn't have it - they're on broken styles currently so another dev can look into something else)
http://www.georgiancollege.ca/athletics/ (fitness center menu item)
http://www.georgiancollege.ca/sdvadev/ (programs menu item)
Thanks.
EDIT: also when you inspect the element the white space gets proportionally larger compared to the size of the inspector toolbar - if that helps.
try to set#menu-item-197 {overflow:hidden}
or simply #pagenav li {overflow:hidden}
It might be because of the relative positioning. For instance, a div block naturally structered at the bottom is forcefully placed at the top. In this case, the space of the div block will always be preserved thus leaving behind white spaces!!!
It is because in custom.css you had:
#wrapper {
min-height: 100%;
position: relative;
}
remove min-height: 100%, and it works well.
P.S.
I'll change footer to be without absolute positioning, because it makes horizontal bar to appear under the browser window, like this:
#footer {
bottom: 0;
height: 60px;
width: auto;
margin-top: 10px;
margin-bottom: 0;
padding: 1%;
text-align: center;
}
I found this awesome .js called kinetic. I've been messing with the html, css for sometime now and am unable to set the container to full screen.
http://designobvio.us/v4design/demo.html
I've set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.
I've paired down the code as much as possible for readability. As you can see I've set the height to just 400px because it just goes crazy otherwise. If there's any thing else i can offer as support, please don't hesitate to ask.
As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?
You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:
CSS
#wrapper {
border: 5px solid #000000;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.