纯css footer 贴底 ,简洁

最新推荐文章于 2023-11-07 16:39:31 发布
最新推荐文章于 2023-11-07 16:39:31 发布
阅读量770 收藏
点赞数
文章标签： css 浏览器
css结构如下 
html,body{
height: 100%
}
.containor{
min-height: calc(100% - {footer的高度})
}

html结构如下， 
<html>
 <body>
<div class= "containor"></div>
<footer></footer>
</body>
</html>


作者：Zimmer
链接：https://www.zhihu.com/question/19798646/answer/119144057
来源：知乎

endless_lover
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS//让文字居于div的底部
weixin_37877794的博客
09-05 768
https://blog.csdn.net/weixin_38168728/article/details/101573357 https://blog.csdn.net/sd19871122/article/details/53143035 代码演示：https://codepen.io/janmie-cjm/pen/yLXapdB?editors=1100 外层div 设置positon 为 relative 里层p 设置position 为 absolute；且 bottom、padding、mar
footer美化代码
04-26
在网上发现这么个footer美化的代码，我没有提供使用说明，请大家下载后好好研究即可使用，谢谢昂！
Vue+css好看的动态Footer
最新发布
weixin_46006743的博客
11-07 188
Vue+css好看的动态Footer。
Footer布局
canway01的博客
01-06 924
本文将继续介绍footer如何定位到页面最下放，已不止于内容少的时候悬空，从而影响美观。 也许很多人对footer还不是很了解，那么看下图应该有点点印象了。这个是在开发网站或者web项目中很常见的问题，例如在分辨率高点的电脑上一个登录页面展示，版权就或浮到页面中间来，下面就悬空了，及其影响美观，那么如何解决呢？ image001.jpg 一、 方法一使用容器使用负的margin-bottom 首先...
CSS粘住固定底部的5种方法
weixin_33754065的博客
05-17 542
本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图：· 方法一：全局增加一个负值下边距等于底部高度 有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高...
CSS Sticky Footer完美的CSS绝对底部1
08-03
值得注意的是，Ryan Faits的方法使用了一个空的`div`层，可能不符合语义化编码标准，而A List Apart的文章则引入了JavaScript，相比之下，纯CSS的Sticky Footer方案更加简洁且无需额外的脚本支持。 总之，CSS ...
CSS Sticky Footer实现代码
09-22
使用 FlexBox 布局来实现 Sticky Footer 非常简洁。首先，将 `body` 的 `display` 属性设置为 `flex`，并设定 `flex-direction` 为 `column`，确保元素沿垂直方向排列。接着，设置 `min-height: 100vh` 使 `body` ...
css练习单页简洁html网站模板下载
04-02
单页网站设计近年来非常流行，主要因为它能提供简洁的用户体验，让用户无需滚动页面或点击多个链接就能获取所有信息。这种设计适用于个人作品集、小型企业介绍或者简明的产品展示。此模板旨在帮助你理解和实践单页...
简洁博客html5兼css3网站模板
04-02
【简洁博客html5兼css3网站模板】是一个专为个人博客设计的网页模板，它结合了现代网页技术HTML5和CSS3，旨在提供一个既美观又功能丰富的展示平台。这个模板以其简洁的设计风格吸引眼球，适合那些希望用简单、清爽的...
页面布局，实现footer永远在底部
08-03
随着CSS3的出现，Flexbox提供了一种更简洁、灵活的解决方案。通过设置flex-direction和align-items属性，我们可以轻松地让footer始终在container的底部。 ```css body, .container { display: flex; flex-...
html5+footer模板,HTML5 Footer
weixin_33445930的博客
06-25 535
The HTML5 footer element is used to semantically mark the footer section of apage, or of individual parts of the page. For instance, a page containing a list of blog postsor articles may have a footer...
css 布局底部,CSS贴在底部的布局
weixin_39817215的博客
08-04 1139
CSS 贴在底部的布局, 它始终在页面的底部。http://www.cssstickyfooter.com看这个网页的底部，为什么会跑到那儿去呢？即使内容很少的情况下，它也始终在页面的底部。否则页面底部将留下大量空白。下面是它实现的代码：html, body, #wrap {height: 100%;}body > #wrap {height: auto; min-height: 100%;...
css下 让元素贴近容器的底部
yunxian_19的专栏
11-14 8367
div { width: 100px; height: 100px;   background-color: gray; } table{ width: 50px; height: 50px;   background-color: lightgray;   position: relative;   bottom: -50px;//table.height - div_hei
css粘住固定底部的3种方法
讨口子
07-20 963
实现如图： 方法一：全局增加一个负值下边距等于底部高度 //html代码 <body> <div class="wrapper"> content <div class="push"></div> </div> <footer class="footer"></footer> &l...
粘连 Footer 的 5 种方法 | CSS-Tricks
强子的专栏
06-20 5115
本文转载自：http://www.zcfy.cc/article/491文中对于“吸附”布局的实现非常巧妙，当我第一次看到那个效果图，第一时间也没有想到好的实现方法。一个简短的历史，如果你愿意那样说的话。粘连 footer 的目的是让它“支撑”在浏览器窗口的底部。但不总是在底部，如果有足够的内容将页面撑开，footer 可以被撑到网页下方去。但是，如果页面的内容很短，粘连 footer 仍然会出现
紧贴底部的页脚footer常用解决方案
yyjiuguilian的博客
07-08 583
问题描述: 当页面内容的高度 < 视口的高度 - 页头的高度(header) - 页脚的高度(footer) 就会出现footer页面不不会紧贴在视口的最底部，而是跟在内容的下方。 **解决方案一: ** 采用一个视口相关的长度单位 vh/vw 和 calc函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="view
CSS_贴在底部的布局
trace的技术备忘专栏
02-16 1244
先看代码:  content side footer <!--div { border:1px solid #CCCCCC;}html, body, #wrap {height: 100%;}body > #wrap {h
【css】不同大小的字体底部对齐
热门推荐
汪小穆的博客
12-13 2万+
前言：不同font-size的字体会出现上下偏差，这是一个蛮令人头疼的问题。特别是中文字体(英文字体不会出现这种问题)。 <body> <style> b { font-size:24px; } span { font-size:50px; } </style> <div><b&g...
footer属性css,CSS基础-footer元素始终粘在浏览器底部的四种方法
weixin_29302047的博客
08-03 921
本文介绍底部footer元素如何始终粘在浏览器底部。当内容container足够多、可以撑开一屏的时候，底部footer紧跟在内容container后边；而内容container不够多、不足以撑开一屏到达浏览器底部时，底部footer仍然在浏览器底部。需求看下图：(原谅我用了简单粗暴的三原色￣□￣｜｜)注：文中所有关键代码写在了/* key code */里，背景色background-color...
html css jsp面试题
05-25
1. HTML是什么？它的作用是什么？ 答：HTML（HyperText Markup Language）是一种标记语言，用于创建和组织文本、图像和其他资源，以便在Web上显示和处理。HTML的主要作用是定义网页的结构、内容和语义。 2. CSS是什么？它的作用是什么？ 答：CSS（Cascading Style Sheets）是一种样式表语言，用于控制Web页面的外观和布局。CSS的主要作用是定义网页的样式、颜色、字体、背景、边框等外观属性。 3. JSP是什么？它的作用是什么？ 答：JSP（JavaServer Pages）是一种基于Java的服务器端技术，用于创建动态Web页面。JSP的主要作用是将Java代码嵌入到HTML页面中，以便在服务器端动态生成网页内容。 4. 请解释一下HTML5中的语义化标签。 答：HTML5中的语义化标签是一组用于定义网页内容的标记，以便更好地描述文本和图像的含义和结构。这些标签包括header、nav、section、article、aside、footer等，它们可以让开发者更容易地理解和维护网页内容。 5. 请解释一下CSS中的盒模型。 答：CSS中的盒模型是指一个元素在页面中的显示区域。它由四个部分组成：内容区、内边距区、边框区和外边距区。内容区包含了元素的实际内容；内边距区是内容区和边框区之间的空白区域；边框区是围绕内容区和内边距区的线条；外边距区是边框区和相邻元素之间的空白区域。盒模型可以帮助开发者更好地控制元素的大小、位置和样式。 6. 请解释一下JSP中的EL表达式。 答：JSP中的EL（Expression Language）表达式是一种用于在JSP页面中插入Java变量和表达式的简单语法。它使用${}符号将Java表达式嵌入到HTML或文本中。例如，${name}可以显示一个名为“name”的Java变量的值。EL表达式可以使代码更简洁、易于维护和重用。 7. 请解释一下HTML和XHTML的区别。 答：HTML和XHTML都是Web页面标记语言，但它们的语法不同。HTML的语法比较宽松，允许省略标签和属性的引号等。而XHTML的语法比较严格，要求标签和属性必须闭合，并且必须小写。另外，HTML和XHTML处理错误的方式也不同，HTML会尝试自动修复错误的标记，而XHTML则会抛出错误。 8. 请解释一下CSS中的浮动（float）属性。 答：CSS中的浮动（float）属性是一种用于控制元素在页面中的位置和布局的方法。浮动元素会脱离文档流，并尽可能地靠近容器的左侧或右侧。浮动元素可以与其他元素进行对齐，也可以与其他浮动元素进行堆叠。浮动元素通常用于创建多列布局或图像浮动等效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值