如何制作从页面中间开始到页面末尾的内容？

Question

_________________
|                |
|                |
|                |
|                |
|                |
|________________| <content starts>
|                |
|                |
|                |
|                |
|________________|<content ends>
|footer          |
——————————————————

它应该是每个屏幕分辨率的底部...... 从移动设备到大屏幕。 我尝试了postion：绝对但它与移动设备混淆..

Answer 1

您可以尝试添加margin-top: 50vh;（50vh =视口高度的50％）

如果您希望它恰好是高度的50％并固定在底部，您还可以设置height: 50vh;position: fixed;bottom: 0px;

Answer 2

这是您的解决方案： https://jsfiddle.net/na3w6kav/

你可以尝试在margin-top属性中使用VH而不是％来找出最适合你的东西，因为在调整窗口大小时这两个单元的行为几乎没有什么不同。 VH单位也在0-100范围内。

<div class="halfscreentop">Text here
</div>
<div class="footer">FOOTER</div>

CSS：

.halfscreentop {position:relative; margin auto;
width:100%; background:#ccf; margin-top:50%;}

.footer{position:relative; margin auto;
width:100%; height:40px; background:#ff0;}