如何用CSS把层固定在整个网页的最底部?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用CSS把层固定在整个网页的最底部?相关的知识,希望对你有一定的参考价值。

注意不是固定在浏览器窗口的最底部.
网页内容也又长又短.

<script language="javascript">
function diff(x)
ie4=(document.all)?true:false
if (ie4)
block=x.style;

var a=screen.width
switch (a)
case 1024:
block.left=""+(parseInt(block.left)+112);
break;
case 1152:
block.left=""+(parseInt(block.left)+176);
break;
case 1280:
block.left=""+(parseInt(block.left)+240);
break;

</script>
<div id="mooon" style="position:relative; width:350px; height:14px; z-index:1; background-color: #cccccc; layer-background-color: #6699cc; border: 1px none #000000; left:150px;top:385px;">
层的内容 </div>
<script>diff(mooon)</script>

注意:上面这种方法能实现层的固定,但有一个问题是要固定的这个层会独占用高度,以下的方法可以解决:

<div id="Layer1" style="position:absolute; width:49px; height:14px;">

<div id="mooon" style="position:absolute; width:645px; height:43px; z-index:1; layer-background-color: #6699cc; border: 0px none #000000; left:330px;top:380px;">内容
  </div>

</div>
这些代码可以让层固定显示
参考技术A html代码

<body>
<DIV id="container">
<DI id="content">
<h1>Content</h1>
<p>请改变浏览器窗口的高度,以观察footer效果。</p>
<p>这里是示例文字,DIV固定………,这里是示例文字。</p>
</DIV>
<DIV Vid="footer">
<h1>Footer</h1>
</DIV>
</DIV>
</body>

CSS代码:
程序代码

body,html
margin:0;
padding:0;
font:12px/1.5arial;
height:100%;

#container
min-height:100%;
position:relative;

#content
padding:10px;
padding-bottom:60px;
/*20px(font-size)
x2(line-height)+10px(padding)x2=60px*/

#footer
position:absolute;
bottom:0;
padding:10px0;
background-color:#AAA;
width:100%;

#footerh1
font:20px/2Arial;
margin:0;
padding:010px;
参考技术B 直接用css就可以控制
<div style="width:300px; height:300px;position:relative">

<div style="position:absolute; x:100%; y:100%"></div>
</div>
内嵌的那个div会根据外部div的宽度和高度始终停留在该容器的右下角。停留位置可以根据自己需要调整

如何用JS做固定在网页中的导航条

如何用JS做固定在网页边上的导航条,就是那种固定在网页边上的,拉动网页的时候到航天不动,请达人指点。

    使元素固定在网页中,不需要用到JS的,只需要用到CSS样式就可以了。

    使用css 中的   position:fixed;  fixed是相对于浏览器的定位,设置了这个样式的元素将不会随页面滚动而改变位置,固定在屏幕中。

    如 :

    .classname

            position:fixed;

            left:0;

            top:0;

            z-index:9999;

参考技术A 用css做,顶部导航做绝对定位,z-index调一下就可以了。
#navwidth:100%; height:38px;position:fixed;_position:absolute;right:0;top:0px;background: url(../images/topbg.jpg) repeat-x;z-index:88;请采纳谢谢!本回答被提问者采纳
参考技术B 用js 和 css 都行。
设置position属性为 fixed就可以了。
参考技术C 固定定位 pisition:fixed;

以上是关于如何用CSS把层固定在整个网页的最底部?的主要内容,如果未能解决你的问题,请参考以下文章

请问如何用CSS固定页面大小

如何用JS做固定在网页中的导航条

如何给一个动态的网页加个固定的底部(如:备案号)

css 如何设置底部固定

div+css如何用百分比??

如何用CSS让文字居于div的底部