檬味博客 » 问答 » 如何用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 阅读 11 次 更新于 2025-07-21 07:51:23 我来答关注问题0
2 个回答檬味博客专题活动
  • 何曼婷囖514a682 如何用CSS把层固定在整个网页的最底部?

    html代码 Content 请改变浏览器窗口的高度，以观察footer效果。 这里是示例文字，DIV固定………，这里是示例文字。 Footer CSS代码：程序代码 body,html{ margin:0;padding:0;font:12px/1.5arial;h...

  • 文暄生活科普 我在网页设计中插入图片,但图片是保持原大小,我希望它能铺满图层,并放置在网页最顶端,该怎样用CSS实现

    要在网页设计中实现图片铺满整个图层并置于最顶端，可以使用CSS的背景属性和定位属性。首先，确定你想要应用这个样式的目标元素，比如一个具有特定ID或类名的div。对于背景图片，可以使用CSS的background属性。设置background属性时，需要指定背景图片的路径。例如：background: url('图片路径');，其中'图片路...

  • 阿暄生活 如何设置网页全屏显示

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

  • 猪八戒网 怎样使div居中到网页的中间?

    如何让DIV层在网页中居中显示1、在DIV标签对中写入的正文标签的HTML中div/div。然后我们将div设置为宽高度，我们需要注意的是，如果您不设置默认值的宽度为100%哦，所以它将填充整个页面。2、首先我们对body设置text-align：center，再对需要居中的div盒子设置css样式margin：0auto，这样即可让对应div水平...

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

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

其他CSS类似问题

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

CSS相关话题

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