页眉在始终顶页脚底部

Basiclly我是尽量让我的头固定在页面的顶部，并在同一时间，我还需要我的页脚必须在页面底部，whethere有是更少或更多的内容。但我不想要我的页脚定位。所以，当数据页脚移动到那个位置时，会有很大的变化。我现在使用的代码是workin很好，如果我不做我的头修复。页眉在始终顶页脚底部

<body> 
<div id="header">header</div> 
<div id="content">content</div> 
<div id="footer">footer</div> 
</body>

CSS因为这是

*{ margin:0px; padding:0px;} 
    html{ 
    margin:0; 
    padding:0; 
    height:100%; 
    } 
    body { 
    min-height:100%; 
    position:relative; 
    } 
    #header { 
    padding:10px; 
    background:#5ee; 
    } 
#content { 
    padding:10px; 
    padding-bottom:80px; /* Height of the footer element */ 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
}

这是代码，我没有固定我的头在这一点，但我需要一些帮助将其固定。

来源

2013-04-24 Adi

更换你的角色.... ＃内容{ 填充：10px的; padding-bottom：80px;/*页脚元件的高度*/\t \t 最小高度：700像素; } #footer的{ 宽度：100％; height：80px; 位置：相对; 背景：＃ee5; } – hayat 2013-04-24 14:48:12

-4

使用此

position:fixed;

对于你的头。

至于页脚 - 使用此http://ryanfait.com/sticky-footer/

来源

2013-04-24 12:21:50 Deez

他明确表示他不希望使用固定 – 2013-04-24 12:22:31

也位置，如果一个页面的内容长于窗口区域的内容。你会得到重叠的效果。 HAHAH :) – intelis 2013-04-24 12:23:07

如果我能为编辑 – 2013-04-24 12:24:54

你在找什么特别称为“粘页脚”。

http://www.cssstickyfooter.com/

来源

2013-04-24 12:23:10 Adam

不错，就是名字叫某人的实施方法= P – 2013-04-24 12:24:16

它不工作： – Adi 2013-04-24 13:11:14

加倍努力。有用。 – Adam 2013-04-24 13:12:03

如果我理解你的权利，在我看来，你一个棘手的头之后是。试着用以下

 #header{ 
     background: none repeat scroll 0 0 #55EEEE; 
     padding: 10px; 
     position: fixed; 
     top: 0; 
     width: 100%; 
    } 
    #content{ 
     background: none repeat scroll 0 0 #FF0000; 
     color: #FFFFFF; 
     height: 2000px; 
     margin: 40px 0 0; 
     padding: 10px 10px 80px; 
    }

Here is the demo改变#content高度更换你的两个规则影响的页脚位置，但没有头的。

来源

2013-04-24 12:30:28 Ejaz

由于内容非常丰富，如果内容较少，我无法将高度添加到我的'＃内容'中，因此我必须'向下滚动'以查看页脚。所以还有其他选择。 – Adi 2013-04-24 12:59:20

高度已被分配给_＃content_仅用于演示目的。尝试删除它:) – Ejaz 2013-04-24 13:32:11

页眉在始终顶页脚底部

回答

相关问题