4

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.

17
  • Give margin-top value in %
    – Rayon
    Mar 6, 2016 at 1:56
  • Yes, but that's the percentage of the width of the browser window, not the percentage of the height of the browser window. Mar 6, 2016 at 1:58
  • whats the point of that -- you could use position:fixed; with bottom:10%; -- jsfiddle.net/5xs1hct0 -- unlses you mean something else -- do a demo
    – Tasos
    Mar 6, 2016 at 1:58
  • Can you show us what you have tried ?
    – Rayon
    Mar 6, 2016 at 1:58
  • @RayonDabre Updated post, please take a look at that. Mar 6, 2016 at 2:06

2 Answers 2

6

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>

8
  • Works great! How is cross-browser compatibility for transform: translateY(-100%);?? Mar 6, 2016 at 2:26
  • Also, if the screen get's smaller i.e. a iPhone 4, then if is further down than when it is on my computer, why is this and how can I fix it? Mar 6, 2016 at 2:29
  • caniuse.com/#search=transform 2D transformations are supported by all the major browsers.
    – symlink
    Mar 6, 2016 at 2:38
  • I updated the code to use calc to accommodate the padding, and pull the below_content up so it's flush with the bottom of main_content. Not sure about the iPhone, I'll check it out.
    – symlink
    Mar 6, 2016 at 2:40
  • Looks good to me on an iPhone 4 emulator. Maybe the update fixed the problem. Are you still seeing the problem?
    – symlink
    Mar 6, 2016 at 2:44
0

so put a . before main_content if it is a class and put # if it is an id.

below css code for main_content id should work.

#main_content {
    width: 100%;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
}

You can try is here https://jsfiddle.net/xsdr00dn/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.