html页脚 永远位于底部

CSS如何把DIV永远置于页面的底部~

方法一：
思路：利用text-align属性将图片保持在底部，然后设置padding-top的值使其保持在底部。
结构如下：



CSS样式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
运行结果如下：



释义：
图片的尺寸为150x100px，DIV的大小为300x200px；
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色，便于观察效果。
text-align:center,实现图片的保持在底部；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度 – 图片的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。


方法二：
思路：只用padding属性，通过计算求得保持在底部
结构代码同上；
CSS样式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。


方法三：
思路：
利用图片的margin属性将图片保持在底部，利用DIV的padding属性将图片保持在底部。
结构代码同上；
CSS代码如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注：
Img是内联元素，要设置其margin属性使其保持在底部，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平保持在底部；（有的设计师为图片再加个div标签，然后通过div标签的margin实现保持在底部
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation、见本处参考资料原文内容:)。
2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

body,html {
    margin: 0;
    padding: 0;
    height:100%;
}
#content {
    min-height:100%;
    position: relative;
}
#main {
    padding:10px;
    padding-bottom: 60px;
}
#footer {
    position: absolute;
    bottom: 0;
    background-color: #AAA;
    width: 100%;
}

你只要设定了高度都是可以的。它都会在最下面的。

不知道啊。查查百度吧

---

永城市19214271318： html页脚 永远位于底部 - ？
睢怎赛乐： body,html { margin: 0; padding: 0; height:100%; } #content { min-height:100%; position: relative; } #main { padding:10px; padding-bottom: 60px; } #footer { position: absolute; bottom: 0; background-color: #AAA; width: 100%; }

永城市19214271318： HTML页脚无论内容怎么变都在网页的最底部 - ？
睢怎赛乐： html> 网页底部固定 头部 内容 底部

永城市19214271318： 如何让网页的页脚部分始终在网页的最下面? - ？
睢怎赛乐： 网页中的元素都是以body作为参考,所以又必要保HTML和Body的高度相同. 第一种方法:在body中使用两个容器,包括网页的页脚和另外一部分(container).设置container的高度为100%;页脚部分使用负外边距保持其总是在最下方.这种...

永城市19214271318： DIV+CSS页面能不能让footer始终在底部 - ？
睢怎赛乐： footer本来就是在底部的呀,但是技术人员什么都能做到,任何位置都能变,html是不能让它变位置的

永城市19214271318： 如何将页脚固定在页面底部 - ？
睢怎赛乐： 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别...

永城市19214271318： html5 css制作一个网页,但是页面里内容不多不能占满整个界面,这个时候怎么写让页脚一直在页面最下面 - ？
睢怎赛乐： 最快的方式是将底部的设置定位,也是最常见方式. 例子:<style type=＂text/css＂>.main{padding-bottom: x px;/*x 和底部的高度相同*/}.foter{position: fixed;height: xpx;/*x 是你底部的高度*/width: 100%;left: 0px;bottom: 0px;}</style><div class=＂header＂>头部</div> <div class=＂main＂>内容</div> <div class=＂footer＂>底部</div>希望能给你帮助.

永城市19214271318： 页面主体高度不固定,如何让页面的footer始终在最底部 - ？
睢怎赛乐： 有时候我们的页面主体高度并不固定,而我们又不想让footer跟着主体高度变化而跑动,也许您会想到使用position:fixed;但是这并不能达到理想的要求,下面是我曾经在实际工作中用到的一种方法: html:<div class=＂wrapper> <div class=＂...

永城市19214271318： 最小高度100%页脚保持在底部的布局方法是什么? ？
睢怎赛乐： 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位...

永城市19214271318： 如何使页面的footer始终位于底部 - ？
睢怎赛乐： }#head2 { width:0px; background-color;globalContainer＂head>:100px;&lt.aspnetcdn;style type=&quot:0px;/:Gray;css＂javascript＂/ height;/ margin;>/&quot:100%;div id=＂head1&quot!DOCTYPE HTML PUBLIC &quot:0px; }< }#globalContainer { ...

永城市19214271318： 如何让footer始终在页面底部的方法 - ？
睢怎赛乐： 用简单的CSS实现将FOOTER固定在页面底部,我们通常布局的时候都是头部,内容区域,还有底部,一般都是使用三个div,然后id分别设置为header,content,footer,然后在定义每个div的高度,一般来说,header,footer都是公共的,因为高度,内容一般...