檬味博客 » 问答 » 如何用CSS把层固定在整个网页的最底部？

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

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...
如何用CSS把层固定在整个网页的最底部？
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;
}2018-03-21
打开一个编辑软件设置一下css与div区域，使其固定在页面的底部。
其主要属性：position:fixed; 绝对定位生成绝对定位的元素，相对于浏览器窗口进行定位。
网页中实现效果如下：

扩展：还有一种定位方式为：position:absolute如上例方式浏览器滑动的时候，它会随着浏览器滚动条而滚动；而position:absolute则不会。
css的特点：
结构与样式分离的方式,便于后期维护与改版;
样式定义精确到像素的级别;
可以用多套样式,使网页有任意样式切换的效果；(如:www.YOUKU.COM的开,关灯效果)
降低服务器的成本。
2018-05-29
mengvlog 阅读 306 次 更新于 2025-09-07 06:05:23 我来答关注问题0
2 个回答檬味博客专题活动
  • 阿暄生活 如何设置网页全屏显示

    HTML设置：在HTML中，可以通过设置元素的style属性来实现全屏效果。例如，设置margin和padding为0，以及overflow为hidden，可以移除网页的边距和内边距，并隐藏滚动条，使网页内容占据整个屏幕。CSS样式：使用width和height属性将元素设置为100%，使其填满整个屏幕。使用position: fixed;将元素固定在屏幕上，即使...

  • 阿暄生活 css如何设置页面总体固定宽高和宽度

    CSS设置页面总体固定宽高和宽度，可以通过设置页面的根元素（通常是或元素）的宽度和高度属性为固定值来实现。具体做法固定宽度：设置网页的宽度为一个固定值，例如1000px。这样做可以确保网页在水平方向上不会随屏幕尺寸变化而改变。固定高度：设置网页的高度为一个固定值，例如800px。这样做可以确保网页在...

  • 文暄生活科普 如何用div实现页面上下部分固定,中间部分随滚动条移动而移动的代码

    首先，我们需要定义一个包含整个页面内容的容器，这个容器应该设置为固定高度和宽度，并且启用垂直滚动条。这可以通过以下CSS代码实现：.content1 { overflow: hidden;overflow-y: scroll;SCROLLBAR-FACE-COLOR:#205e17;SCROLLBAR-SHADOW-COLOR:#86ff92;SCROLLBAR-3DLIGHT-COLOR:#205e17;SCROLLBAR-TRACK-...

  • zhuojunzhang 新手求助,怎样用css让网页布满整个浏览器窗口

    body,html{ padding:0px;margin:0px;} 浏览器会默认给body留有margin，重置为0即可。另一方面，内容的块(div)长度单位使用%定义（这只是针对你的铺满的要求，实际布局中，使用%也会出现某些问题，以后可以慢慢去学会如何调整），比如：.content{ width:100%;} ...

  • fangzhibo css+div 网页充满整个浏览器窗口

    1、第一步，创建或打开Web项目，新建html文件以及CSS文件，见下图，转到下面的步骤。2、第二步，执行完上面的操作之后，图中显示了HTML页面代码，定义div并给出id属性等级，见下图，转到下面的步骤。3、第三步，执行完上面的操作之后，将“height”值设置为零，使用“padding”属性的“top”或“bottom...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部