Scrolling Content while Header/Footer Remains Stationary - html

I have a website where the header/footer is to remain stationary at the top/bottom of the screen while the content scrolls. I have been following this question that explains how to achieve this effect which sort of works for me. As you scroll down the content, you will notice that the background-image for the content becomes chopped off. I am confused to why this is happening as I have set the background image to repeat-y. I also noticed that the footer appears to be hiding some of the content as well.
To achieve this content-only scrolling effect, I added position: fixed; to the header/footer. I left the content with position: absolute; to keep the footer fixed to the bottom of the screen.
-> Link to website

First off, add bottom: 0 to your footer. That will bring it down to touch the bottom.
Now, take position: absolute off #content.
Lastly, add extra padding at the top and bottom of #content so that your text won't get hidden behind the header/footer.
Firebug tells me that will solve the problem on your site. Ask him yourself.

Related

Make footer stay at bottom of site unless site content goes past vertical window size

I have a footer for a website. The footer is an full width image and it's a gradient fade (black to transparent), the text is centered with text-align: center.
These below images show exactly what's going wrong.
Footer misbehaving due in tall window: https://ibb.co/JH3rCdB
Footer behaving properly due in short window: https://ibb.co/wCRnb8p
I don't want the footer to be always fixed at the bottom. So, I don't want position: fixed. If the window is not that tall, the footer should only be visible when the user scrolls all the way down. This is working fine.
The problem is when a user's browser window is very tall. The footer is then visible right under the site content, and then there's a gap between the footer and the bottom of the window.
How do I solve this?
Position: fixed is not what I want, and Position: sticky with bottom: 0px doesn't work right.

Are there any 'gotchas' to adding a bottom margin to an anchor?

I use anchors a lot throughout my site. I now have a 60px navigation bar that runs across the top of the page thats using absolute positioning so there's no impact on anchors.
If I change that positioning to fixed - the bar will of course stay at the top of the screen but when someone clicks on an anchor there will be a little bit that's obscured by the black fixed bar at the top of the screen.
I've tried using this CSS however that seems to solve this by pushing down the text (including the anchors heading) and it seems to be OK:
a[name] {
display: inline-block;
margin-bottom: 60px;
}
Can anyone think of any gotchas that I haven't thought about?

Push footer to bottom of page without using "positition: absolute; bottom: 0"

So I'm trying to have my footer in the bottom of the page at all time without using "position: absolute" as it overlaps the content of the page when the screen gets smaller. I also do not want to use "position: fixed" as I do not want the footer to be visable at all times. When I use "position: relative" it creates a white space below the footer and I cannot remove it. I would be very grateful if you could help me. I'm currently using Bootstrap 4 for my project. Here's my code:
<div class="container">
(some content)
</div>
<footer>
(some content)
</footer>
css
footer {
position: relative;
bottom: 0;
width: 100%;
background-color: grey;
text-align: center;
}
Thanks in advance.
Use position fixed instead of absolute with fixed the footer always at bottom of the page. And bottom 0 then it will always be at bottom. If anything overlap the footer then you can do z-index to 100 or higher so nothing will overlap the footer.
compare document.scrollingElement.scrollHeight and window.innerHeight in js.
if they are equal then that means your content is less than the view port in terms of height and you can use position absolute at bottom for footer as it wont override with your actual content.
if document.scrollingElement.scrollHeightis great than window.innerHeight then that means your content is bigger than the view port so without worrying you can place the footer at the bottom without using position property.
If window resizing is your problem (resizing may change height of your document) then you can use resize event listener on window. There you can call a function to do above mentioned steps.

ScrollBar on Top of Html Content

as you know if html content vertical view is more than browser window, a vertical scroll bar will add to page. It will cause moving html content into left which does not have a good view.
You can avoid this treat using this CSS code:
html{
overflow: scroll;
}
But there is a problem with this code, you will always see a disabled scroll bar on right side of the page. Now let's check another way, in this way you will subtract body width of the scroll width:
body {
width: calc(100vw - 68px);
margin-left: 34px;
}
This will put body in center and if in future a vertical scroll bar add to the page, it won't affect content and will be on the right side out of the body area! This way is good but there is a very little problem. you have subtracted your body width!!! Just think I have a fully filled body area! In this situation I need the whole 100% width and also I do not want the scroll bar to move my content into left and also I do not want to see a disabled scroll bar always!
So I'm looking for a way I can make scroll bar while showing on top of html content. so Nothing will move and also I have 100% width and when ever it is needed I will see scroll bar.
Is there such trick? Hope I'm clear enough.

Using css to place an image at the top of the page and the bottom

I have been trying to find a solution to this without much success. I am basically trying to place an image using a background property at the top and bottom of the page. Now I know I can make the positioning relative and it would place the image at the bottom move according to how much content is on the page.
I can also make the header/footer an absolute position and effectively just have the user scroll between them. But I want to make it where if there is not a whole lot of content, I want to place the image at the bottom of the page, and if there happens to be a lot of content (i.e. that the user has to scroll through), the image gets placed at the bottom.
This is just a little thing I am trying to figure out for myself so any ideas/suggestion or tutorials on this would be greatly appreciated. I would rather not use tables to layout my page and wondering how to go about this.
Thanks!
Could you apply padding-bottom to your <body> and then use background-image to apply your image to it? If not, see my answer to this question for how to make a footer DIV stick to the bottom of the page: Sticky footer, or rather: content doesn't stretch down to footer
If you are looking for something like this:
| IMG |
| CONTENT |
| FOOTER |
then why do you need to use absolute positioning? If you have 3 divs, one on top of the other, with a certain width and the property clear:both, then the arrangement would be automatic. Then, in case you have a page with very little content, you can put a min-height to the content div.
For the first image that is the header, set the position to 'fixed' and top to 0px:
.first-image {
position: fixed;
top: 0px;
left: 0px;
}
For the second image that is the footer, set the position to 'fixed' and bottom to 0px;
.second-image {
position: fixed;
bottom: 0px;
left: 0px;
}