I know, I know, I asked this question before. Unfortunately, I lost my work. I started over and I came back to my old post (min-height:100% doesn't work on my container?) and couldn't remember what the trick actually was.
So I will post the link to my "experiment" here and I hope that you guys (or girls) can help me out, the problem is: I want the footer to be at the very bottom and the content and the two sidebars to connect to the top of the footer. (Also, the scrollbars have to disappear, haha)
http://www.jbehrens.nl/test/index.html
If anyone's able to help me, it's very much appreciated!
Set the footer to have
position: fixed
bottom: 0
And then set a height for your side bars and content pane and you might want to set
overflow: scroll
for the side bars and the content pane.
Related
so recently I'm working on a webpage to sell clothing, somehow I have problems in positioning my footer. At the moment the Footer looks like this. https://i.imgur.com/3dr9i3p.png
I want to stick the line to the bottom, which means, lookbook, shop, about and the line sticks with a bit of space to the bottom and if u scroll down the rest of the footer is revelead. It would look like this then: https://i.imgur.com/Py0VjK0.png
I don't want to work with space or anything since I want to have my website dynamic and responsive, means It looks at the macbook with 13' as same as on Windows on a 27' monitor. Anyways hope anyone of you guys can help me since I want to drop soon.
My code looks like this and is currently fixed to the bottom of the page.
.footer{
width: 100%
position: fixed
left: 0
height: 282px
bottom: 0
background:#F7F7F0
}
Greets
So I tried flexbox, smh I'm not able to use flexbox in elementor. Second point is, that I tried setting the height to fit to the screen, also using the min-height like Anas wrote, still I can only scroll the footer and not the footer when scrolling the page. Hope to get help asap.
Just click any post to see what I mean, here's
I want to either:
1.make whole site pushable by scrollbar, so header and body have even widths
or
2.make whole site not pushable by scrollbar.
How can I do that? Maybe its because my header is 100% of width, while my body is fixed value (i think it is, dont remember).
Any help appreciated, ive been working on this website css for 2 weeks and my brain already wanted to give up
thanks #TheFrozenOne yeah that was it. i thought i added padding on post pages as well (and i did) but i added it to wrong div.
I fixed it already.
PS, sorry for not providing code.
Hope I can explain my question so you understand :)
I have a sidebar with position: sticky which moves the sidebar when scrolling down the page. My problem is now, when I scroll the page complete down, there is another element which get covered from the sticky sidebar. Is it possible to move that element down also when reaching it with the sidebar?
Please see my page for reference, so you´ll know what I mean. The clue would be to do it with css only?
https://heimprofi.shop/bodenbelaege-sockelleisten/sockelleisten/altberliner-hamburger-profil/
Hope you guys can help me out. Thanks a lot.
I've recently launched a website and seem to be having a problem with a static page I have created. It isn't a major issue but it is really bugging me!
The website in question is: http://gadgetmill.co.uk/
Basically I have hidden the horizontal scroll bar via CSS but want to get to the root of the problem and solve it rather than cover it up. The problem is that the website keeps wanting to scroll horizontally when there is no visible content to the right anyway.
I'm assuming it is the footer that is triggering this but would be very grateful if someone could tell me what to change to fix this?
Thanks a lot, and a happy new year!
I checked your site on firebug
Seems like
.footer-wrap {margin :0 -8em}
is causing it. Cant figure out why you applied it, guess you can either do away with it or work your way around it. Disabling it fixed things for me.
Just remove that padding: 0 1em; and width: 96% on body and set right:0px on element with id socialslider
in .footer-wrap (custom.css)
change the margin from
0 -8em
to
0 auto
this works for me using firebug in chrome.
Hello once again :) !
Can anyone accidently help me with this problem.
I saw very few sites before, but never bookmarked any of these.
If I have body background, fixed header and inner background, where the content is...
And if I want to scroll down to see more content/inner background, my image goes above header behind and I don't know how to make it to disappear behind headers top margin. Anyone can help me with this , please ?
Images:
Normal body background, fixed header and inner background below header
http://screensnapr.com/v/HbcNXA.png
Body background, fixed header and scrolled inner background below header, went above header's position.
http://screensnapr.com/v/TKVVuy.png
I know my English is not good enough to explain this... But let's say.
"Hey I am content background, I am standing below header and when someone scrolls me, I am disappearing at the start of header's position." :)
Thanks!
EDIT:
http://jsfiddle.net/WbtQd/
Scroll and you will notice what I want.
EDIT 2:
Seems like someone play with fiddle... Anyway, here is site example:
http://www.monofactor.com/portfolio/mcfc-auctions/
Except that my header have lets say: top: 50px;
So if we add on his site top: 50px; even he have same problem like me :)
http://snpr.cm/OrXCWa.png
EDIT 3:
http://snpr.cm/GNZaGd.png
I; not sure if I understood you completely. You mean that whenever you scroll your page, the main body passes under the header. probably this is because the header is fixed. You can try to make your main body div scrollable. This way, whenever you scroll down, only this specific div will scroll.
Im not sure what your trying to achieve exactly, but zindex in css can make items appear above others. Add this to the header css code:
#yourheaderid {
z-index:10;
}
I have created a jsfiddle of how you should markup your fixed header and the css to go with it.
http://jsfiddle.net/LYT6V/
I'm assuming this is the result you were looking for?