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

html-css018

CSS如何把DIV永远置于页面的底部,第1张

position:fixedbottom:0这个方法简单好用。

运用这个CSS把DIV永远置于页面的底部 利用绝对定位,然后设置底部距离为0。

这个div如果位置在所有div的后面,那么只要前面的div 的高度够高的话,它的位置就会在页面的页面的底部的,一般想你这种说的要让他在页面底部的话都是页面高度太小,占不了满屏,导致页面底部部分下面有空白,你可以给这个div 前面的大的div 一个最小高度,让它撑起来。

<style>

.main{min-height: 700px}

</style>

<div class="header"></div>

<div class="main"></div>

<div class="footer"></div>

如何设置DIV层的相对位置,解决办法:

利用js代码首先创建一个div,document.createElement('div')

确认div添加位置,可以在某个dom元素后面,或者通过css属性控制具体位置,主要通过left/top等属性控制。

确定位置之后,显示div即可。 

DIV层的相对位置是对于此DIV的上下左右的容器决定的。

如:<div style="position: relativemargin-top:-100px">则此DIV会相对于上一个DIV向上移100PX。

而绝对是指对整个页面来说。

如<div style="position: absolutemargin-top:100px">则此DIV会相对于整个页面向下移。

可以使用css中的position来对div进行定位来改变div的位置,position属性值的含义:

static:元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative:元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute:元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed:元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。

提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。