css的理解 ----footrt固定在底部

最新推荐文章于 2023-03-16 23:31:10 发布
最新推荐文章于 2023-03-16 23:31:10 发布
阅读量127 收藏
点赞数
原文链接：http://www.cnblogs.com/cl94/p/10335834.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin:0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    #container{

        width: 100%;
        min-height: 100%;
        padding-bottom: 50px; /*底部空出50px，放footer*/
        position: relative;
        box-sizing: border-box; /*效果：padding后不改变其宽高*/
    }
    .nav{
        /*最上面的div不能有margin-top，不然会造成整个body下移*/
        width: 100%;
        height: 50px;
        background-color: blue;
    }
    .main{

        width: 100%;
        height: 400px;
        background-color: red;
    }
    .footer{
        height:50px;
        background-color: yellow;
        position: absolute; /*相对于#container固定定位*/
        left: 0;
        bottom: 0;
        width: 100%;
    }
</style>
<body>
    <div id="container">
        <div class="nav"></div>

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

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

 

转载于:https://www.cnblogs.com/cl94/p/10335834.html

weixin_34090643
关注
通过css实现-让页面的footer始终位于底部
weixin_48596030的博客
07-15 1835
当页面内容全部占满时，滑动到最下面，显示footer在底部；当页面内容不满时，footer也是在最底部显示。
CSS深入理解之line-height
literarygirl的博客
02-12 1万+
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。 一、line-height的定义 line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。 定义三问： 什么是基线？ 为何是基线？ 需要两行？ 如图红色线即为基线 基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！ （*线指任意线） 第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已
css让footer始终位于页面的最底部
Hling's Blog
03-23 2万+
html代码结构为：<div class="container"> <div cass="header"></div> <div class="body"></div> <div class="footer"></div> </div>第一种情况：footer随着进度条的滚动而滚动.container{width:100%;min-height:100%;position:relative;} .b
前端批量对table tr 进行置顶、移动、置底操作。
最新发布
w2512149的专栏
03-16 685
在网上搜索了下，大部分都是针对单行进行置顶、上下移动、置底操作的，几乎没有针对复选多行进行批量移动操作。代码我只写了一个大概，很多细节还未完善，比如判断已经移到到最顶部或最底部等，这里贴代码只是给大家一个参考。
html中的底部导航栏,html中导航栏固定在头部或者底部
weixin_28932617的博客
06-09 2224
demo.body{width: 98%;height: 200%;}.nav{background: url("global_nav_bg.png") repeat-x scroll 0 0 transparent;height: 35px;width: 100%;z-index: 9998;position: fixed;left: 0px;}.top{top: 0px;}.bottom{bo...
CSS基础
weixin_52135318的博客
03-30 797
CSS基础知识
[CSS入门到进阶] 4行CSS实现footer置底！超常见的需求，快来收藏
Hull Qin
09-09 4702
大部分网站都需要footer，而footer置底是一个常见的产品诉求。今天我们用4行CSS样式，实现这个常见的需求！快来收藏～
css3-mediaqueries.js+html5.js
07-04
在不支持媒体查询的旧版IE中，"css3-mediaqueries.js" 库起到了关键作用。它通过JavaScript模拟了媒体查询的功能，使得网页可以响应不同的屏幕尺寸，尽管性能可能不如原生支持的好。 **HTML5.js** 是另一个针对旧版...
css text-stroke 文字描边
352328759的博客
12-22 3356
text-stroke 不是标准的 css 属性, 所以本篇读者可以视为娱乐 text-stroke 是复合属性, 包括 text-stroke-width, text-stroke-color 因为不是标准属性, 大多数情况要加上前缀 text-stroke-width 指描边的宽度, 该属性的描边风格是居住描边(内边, 外边各占一半), 且只有居中描边一种 结合 absolute 定位, 用未描边的内容, 遮盖已描边的内容, 可以实现只描外边的效果 demo <!DOCTYPE html>
CSS--box-shadow
weixin_52283867的博客
05-27 5099
前言 本文主要是简单学习下box-shadow这一属性的使用方式，如有错误请大家多多指正！！ 正题 简介 box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。 参数理解 X轴偏移量（h-shadow） 这个值必需的，表示水平阴影的位置，允许负值 正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur值会有模糊效果 Y轴偏移量（v-shado
【译】CSS五种方式实现Footer置底
qq_36309066的博客
02-20 1402
【译】CSS五种方式实现Footer置底 页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。 当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。 实现方法 1. 将内容部分的底部外边距设为负数 这是个比较主流的用法，把内容部分最小高度设为100%，再利用
设置table中的一行始终处于页面最底部
全场梦游c的博客
11-07 3232
<tableborder="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td...
css段落置底,CSS 五种方式实现 Footer 置底
weixin_35615322的博客
08-03 715
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。实现方法1. 将内容部分的底部外边距设为负数这是个比较主流的用法，把内容部分最小高度设为100%，再利用内容部分的负底部外边距值来达到当高度不满时，页脚保持在窗口底部，当高度超出则...
css的基本选择器有哪些？
lizengyuan的博客
05-27 575
*号，通用元素选择器，匹配任何元素； p标签，标签选择器，匹配所有使用p标签的元素； .nav，class选择器，匹配所有class属性中包含nav的元素； #foot，id选择器，匹配所有id属性中包含foot的元素； ...
CSS Footer固定到底部
Scar的博客
07-15 480
你想要怎么放置你的 Footer？ 风雨不动稳如狗 固定在可视窗口最底部，页面滚动也仍然固定在最底部。 能屈能伸 页面内容高度不确定，希望 Footer 放置在页面内容的最下方。 我是一个demo 页面内容少，无法撑开，在可视窗口最底部 页面内容多，在页面最底部 怎么做 你想要风雨不动稳如狗，使用下列代码： 对于第二种能屈能伸的情况，你可以 1. 设置min-height <div class="wrapper"> </div> <footer class="footer
css footer 定位
softuse的博客
06-14 476
<!--[if IE 6]-> <style> #wapper{height:100%;} /* IE在高度不够时会自动撑开层*/ </style> <![endif]--> .footer { background: rgb(108, 135, 96); /*position: absolute;*/ bottom: ...
HTML+CSS底部footer两种固定方式
热门推荐
不明所以
11-01 6万+
网页常见的底部栏（footer）目前有两种： 一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现;(向立凯) 二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条；(向立凯) 废话不多说，可以直接复制代码
理解CSS z-index：层级关系与优先级解析
"理解CSS z-index 层级关系优先级" 在CSS中，z-index属性是用于控制元素在三维空间中的堆叠顺序，它决定了哪些元素会出现在其他元素的前面或后面。这个概念对于创建交互式和动态的网页布局至关重要。以下是对z-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值