标题几乎说明了一切。我希望HTML margin: top;
元素上的CSS main_content
相对于浏览器窗口的(百分比)(以便main_content
始终位于浏览器窗口的底部。我可以做到这一点吗?
我已经尝试过这个并不起作用。 (body {height:100vh}
似乎没有body
任何高度,因为main_content
没有像它应该的那样坚持到底。 p>
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,你会看到“了解我和我的冒险”的标题,以及“最近的活动”和其他东西在那之下,这就是我想要在浏览器窗口底部的部分,最好是“了解我和我的冒险”部分,只是从页面底部伸出来。
答案 0 :(得分:3)
给.main_content一个100vh的上边距(在视口下方),然后使用transformY将其拉回来:
.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;
答案 1 :(得分:0)
所以如果它是一个类,请在main_content之前放置一个.
,如果它是一个id,则放置#
。
下面的main_content id的css代码应该可以工作。
#main_content {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
}