How to make `margin: top;` based on browser height?


Tags: javascript,html,css

Problem :

The title pretty much says it all. I want the CSS margin: top; on my HTML main_content element to be relative to (a percentage of) the browser window (so that the main_content always stays on the bottom of the browser window. How can I accomplish this?


I've tried this and it doesn't work. (the body {height:100vh} doesn't seem to make body any height as the main_content doesn't stick to the bottom as it should.

body {height:100vh}
#main_content {position:absolute; width:100%; display:block; left:0; bottom:0; text-align:center; padding:20px;}
<div>Extra Infomation </div>
<div id="main_content">
<p>here you can learn about me and my adventures</p>
</div>

(Don't try this right now) If you go to my website, you will see the "learn about me and my adventures" heading, that, along with the "recent activity", and other stuff below that, that is the section I want at the bottom of the browser window, preferably with the "learn about me and my adventures" part just sticking out from the bottom of the page.



Solution :

Give .main_content a margin-top of 100vh (just beneath the viewport), and then use transformY to pull it back up:

.main_content {
    text-align: center;
    padding: 20px;
    margin-top: 100vh;
    transform: translateY(calc(-100% - 20px));
	background:lightblue;
}
.below_content{
	margin-top:-100px;
}
<div class="wrapper">
    <div>Extra Infomation </div>
    <div class="main_content">
        <p>here you can learn about me and my adventures</p>
    </div>
</div>
<div class="below_content">
    This is content below the main content
</div>


    CSS Howto..

    How do you make 2 different views for logged in/not logged in like facebook's newsfeed/login pages?

    How to set absolute css path as in jsp

    How do I load a nested web page in a
    tag using only javascript and html?

    How to resize in
    with float:left?

    Contact page Design how to add Bootstrap

    How to Decrease Image Brightness in CSS

    How can I reload css styles when change windows width?

    How to dynamically alter the CSS of a pseudo element with JQuery?

    How to manage css of big websites within team environment without mess?

    How can I prevent my li's from going below my menu even if there is no room?

    How to enable auto indentation in lists and list items?

    how to i convert this asp.net list to html list?

    How to change anchor color when you hover over a list

    How to remove borders around a div (nav, footer, whatsoever) in a WordPress theme? [closed]

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    How to highlight spaces in a tag? (CSS only)

    How to align text next to a div?

    In CSS, how to select a particular tag under mutiple ids?

    How is this fluid column layout changing to single-column as page narrows?

    How to get a frame off animated png using CSS?

    How to set min-height for bootstrap container

    Capybara how to check if 'li' of a given link has proper css class

    How to add color to text in my div with code

    How can I make a sub-menu appear adjacent to main menu and not below it with css?

    how to avoid the ID name in css file

    How to overlap two div with css

    How can i apply css stylesheet to single specific element?

    table image in cell shown smaller [closed]

    How to make an equal distance between elements footer?

    How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?