How can I make part of my page always be in the same position relative to the screen?

Question

I'm making a website, and I have a nav bar and a main content section, the nav bar is at the top of the screen and the main content in near the bottom of the screen. However, if I change my screen height, the main content section stays in the same place, and it goes out of my browsers viewport/window and disappears, which is perfectly normal and expected. But what I want is for the main content section to always be at the same place at the bottom of the screen, no matter what the screen size/resolution/height is. How can I accomplish this?

My website is jeffarries.com and what I'm talking about is on my home page, if you need a visual.

I've used JavaScript, and I'm not very familiar with it. I have no experience with jQuery, however I'm fine implementing a finished jQuery script.

Thanks for your Time and Energy!

Please let me know if any further information in needed.

UPDATE: Since this question appears to be unclear, take a visit to my website, you will see the text that says "here you can learn about me and my adventures", I want that text to appear at the bottom of the browser window when loaded, however, I want it to remain in usual flow, being on top of the "recent activity" box. Basically I want the margin on top of the text to change based on the browser window height, keeping the text at the bottom of the browser window.

@adeneo I want it to be at the bottom of the page, but still be liquid (not `fixed`) when scrolled. — Emmet Arries, Mar 05 '16 at 05:56
Have a look at this answer: http://stackoverflow.com/a/42301/581760 — reinder, Mar 05 '16 at 05:59
That is exactly what the question I linked to is answering. The only difference is that it's called a footer there and not "main content". — reinder, Mar 05 '16 at 06:13
I tried what that linked post said, however that doesn't seem to be working, it's on http://www.jeffarries.com, if you want to check it out. — Emmet Arries, Mar 05 '16 at 06:17
@reinder Sorry about the confusion, I've redone my post to display what I really need. — Emmet Arries, Mar 05 '16 at 06:28
And now your question is of very low quality. Do some research, use google, show what you've tried with javascript. Nobody is going to do it for you — reinder, Mar 05 '16 at 06:29

score 1 · Accepted Answer · answered Mar 05 '16 at 08:22

You can use archive this via CSS3 VH property [ View Port Height ]. For that you have to make one container and add its height to 100vh. Here is the live demo - https://jsfiddle.net/8dptzvye/

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
.container{height:100vh}
.container span{position:absolute; width:100%; display:block; left:0; bottom:0; text-aling:center; padding:20px; background:black; color:#fff}

<div class="container">
<div class="cover">Extra Infomation </div>
<span>here you can learn about me and my adventures</span>
</div>

vinit · Answer 2 · 2016-03-05T06:39:23.703

0

You may be looking for position: fixed

EDIT

If you want to change the margin based on the window size, you can use jquery's resize

$(window).resize(function () { /* change margin of element */ });

edited Mar 05 '16 at 06:39

answered Mar 05 '16 at 05:57

vinit

155
14

Thanks for the answer! but I want it to be at the bottom of the page, but still be liquid (not fixed, scrollable) when scrolled. – Emmet Arries Mar 05 '16 at 05:57
You want it to remain at the bottom of the page everytime or some other experience? May be it is not clear from the question what you ned – vinit Mar 05 '16 at 06:03
Sorry about the confusion, I've redone my post to display what I really need. – Emmet Arries Mar 05 '16 at 06:28
@JeffArries - You shouldn't be changing your question in a way that invalidates existing answers. – BSMP Mar 05 '16 at 06:32
@BSMP Ok, I will revert it! – Emmet Arries Mar 05 '16 at 06:33
Saw Edit, how do I change the margin? I don't know JavaScript well, thanks! – Emmet Arries Mar 05 '16 at 06:43

How can I make part of my page always be in the same position relative to the screen?

2 Answers2