如何根据浏览器高度制作`margin:top;`

时间:2016-03-06 01:50:48

标签: javascript html css

标题几乎说明了一切。我希望HTML margin: top;元素上的CSS main_content相对于浏览器窗口的(百分比)(以便main_content始终位于浏览器窗口的底部。我可以做到这一点吗?

我已经尝试过这个并不起作用。 (body {height:100vh}似乎没有body任何高度,因为main_content没有像它应该的那样坚持到底。

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>

(现在不要试试)如果你去我的website,你会看到“了解我和我的冒险”的标题,以及“最近的活动”和其他东西在那之下,这就是我想要在浏览器窗口底部的部分,最好是“了解我和我的冒险”部分,只是从页面底部伸出来。

2 个答案:

答案 0 :(得分:3)

给.main_content一个100vh的上边距(在视口下方),然后使用transformY将其拉回来:

&#13;
&#13;
.main_content {
    text-align: center;
    padding: 20px;
    margin-top: 100vh;
    transform: translateY(calc(-100% - 20px));
	background:lightblue;
}
.below_content{
	margin-top:-100px;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

所以如果它是一个类,请在main_content之前放置一个.,如果它是一个id,则放置#

下面的main_content id的css代码应该可以工作。

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

您可以尝试https://jsfiddle.net/xsdr00dn/