代码之家 › 专栏 › 技术社区 › Dan YOU

高度:100%和粘性页脚布局。最后一场战斗

css html

Dan YOU · 技术社区 · 15 年前

CSS仙境。我的梦想是了解至少100%的粘性页脚和页眉布局。我一直在浏览网页,发现了五种以上不同的方法。

http://ryanfait.com/sticky-footer/

http://www.visibilityinherit.com/code/height-stickyfooter-centered.php

http://www.cssstickyfooter.com/using-sticky-footer-code.html

http://css-tricks.com/snippets/css/sticky-footer/

http://bonrouge.com/hcf-fluid.php

我相信有某种共同点。我要全世界都知道!

我要求你对这些实践进行深入的比较,并能分辨出每一个实践都包含哪些陷阱。每个布局都可能出现哪些问题?有没有可能用里面的浮球来打破它?我该怎么办?哪些浏览器不包括在内?

需要示例

2 回复 | 直到 15 年前

detaylor 15 年前

Naruto 15 年前

body, html{
height: 100%;
}

body, p {
margin: 0; padding: 0;
}   

#wrapper {
min-height: 100%;
}

* html #wrapper {
height: 100%;
}


/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}

#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}

#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}

/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}

#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}

<body>

<div id="wrapper">


    <div id="header">
        <div id="header_900">
            <p>header</p>
        </div><!--header_900-->
    </div><!--header-->


    <div id="content">
        <div id="content_900">
            <p>content</p>
        </div><!--content-->
    </div><!--content-->


</div><!--wrapper-->


<div id="footer">
    <div id="footer_900">
        <p>footer</p>   
    </div><!--footer_900-->
</div><!--footer-->


</body>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前