流体页眉和页脚（CSS） [英] Fluid header and footer (CSS)

问题描述

我一直试图解决这个问题，但是徒劳无功。



我已经提供了jsfiddle的链接。

< br $>


无论大小或设备如何，我都希望页眉顶部和页脚位于底部。



我的尝试：



https://jsfiddle.net/vwrn08mg/

Hi, I have been trying to fix this but in vain.

I have provided the link to the jsfiddle.


I want the header to on top and footer to be at the bottom no matter the size or the device.

What I have tried:

https://jsfiddle.net/vwrn08mg/

推荐答案

它的行为与你的CSS一样，罪魁祸首在于：

It behave as told by your CSS, the culprit is here:

.form {
    position: fixed;
    top: 35%;

您正在将表格位置从顶部修复为35％。将position属性更改为relative并删除top属性：

You are fixing the the form position at 35% from top. Change the position property to relative and remove the top property:

.form {
    position: relative;
    top: 35%;

您应该阅读 CSS布局 - 位置属性 [ ^ ]并尝试不同的参数。



如果您定位多屏设备，您应该学习响应式网页设计，请查看响应式网页设计编纂 - Peter Leow的代码博客 [ ^ ]

。

You should read "CSS Layout - The position Property[^]" and experiment with the different parameters.

If you target multi-screen devices, you should learn Responsive Web Design, check out Responsive Web Design Codified - Peter Leow's Code Blog[^]
.

试试这个

try this

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px;
  background-color:green;
  text-align: center;
}

.footer {

位置：固定;







修复它

.footer{
position: fixed;



that fixed it

这篇关于流体页眉和页脚（CSS）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！