javascript - How to make `margin: top;` based on browser height? - Stack Overflow

admin管理员组

文章数量:1023827

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 acplish 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>

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 acplish 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.

• javascript
• html
• css

Share Improve this question Follow edited Mar 6, 2016 at 2:24 Emmet Arries asked Mar 6, 2016 at 1:50 Emmet ArriesEmmet Arries 54722 gold badges1313 silver badges3636 bronze badges 17

• Give margin-top value in % – Rayon Commented 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. – Emmet Arries Commented Mar 6, 2016 at 1:58
• whats the point of that -- you could use position:fixed; with bottom:10%; -- jsfiddle/5xs1hct0 -- unlses you mean something else -- do a demo – Tasos Commented Mar 6, 2016 at 1:58
• Can you show us what you have tried ? – Rayon Commented Mar 6, 2016 at 1:58
• @RayonDabre Updated post, please take a look at that. – Emmet Arries Commented Mar 6, 2016 at 2:06

 |  Show 12 more ments

2 Answers 2

Sorted by: Reset to default 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>

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/xsdr00dn/

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 acplish 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>

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 acplish 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.

• javascript
• html
• css

Share Improve this question Follow edited Mar 6, 2016 at 2:24 Emmet Arries asked Mar 6, 2016 at 1:50 Emmet ArriesEmmet Arries 54722 gold badges1313 silver badges3636 bronze badges 17

• Give margin-top value in % – Rayon Commented 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. – Emmet Arries Commented Mar 6, 2016 at 1:58
• whats the point of that -- you could use position:fixed; with bottom:10%; -- jsfiddle/5xs1hct0 -- unlses you mean something else -- do a demo – Tasos Commented Mar 6, 2016 at 1:58
• Can you show us what you have tried ? – Rayon Commented Mar 6, 2016 at 1:58
• @RayonDabre Updated post, please take a look at that. – Emmet Arries Commented Mar 6, 2016 at 2:06

 |  Show 12 more ments

2 Answers 2

Sorted by: Reset to default 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>

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/xsdr00dn/

本文标签： javascriptHow to make margin top based on browser heightStack Overflow