纯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
    评论
footer美化代码
04-26
在网上发现这么个footer美化的代码，我没有提供使用说明，请大家下载后好好研究即可使用，谢谢昂！
好看到爆炸的footer
qq_62336448的博客
03-09 2490
好看的footer
css footer底部样式设计
ownlight的博客
10-30 3176
中间很显眼的分割线其实是一个 hr 标签奥！！ hr 标签 <hr /> 样式 hr { width: 80%; margin: 10px auto; height: 1px; background-image: linear-gradient( to right, rgba(255, 255, 255, 0), cyan, rgba(0, 0, 0, 0) ); } ...
前端开发中经典的stick footer布局
越陌度阡
04-24 991
前端开发中，会有这样一种布局，当页面内容不足一屏时，页脚在屏幕底部，当内容超过一屏时，页脚随着内容的增加而向下移动，即人们常说的的stick footer布局，如下图所示。 实现这个布局的方案有多种，下面给大家介绍一种比较经典的实现方案。 <!DOCTYPE html> <html lang="en"> <head> <.........
Footer布局
canway01的博客
01-06 924
本文将继续介绍footer如何定位到页面最下放，已不止于内容少的时候悬空，从而影响美观。 也许很多人对footer还不是很了解，那么看下图应该有点点印象了。这个是在开发网站或者web项目中很常见的问题，例如在分辨率高点的电脑上一个登录页面展示，版权就或浮到页面中间来，下面就悬空了，及其影响美观，那么如何解决呢？ image001.jpg 一、 方法一使用容器使用负的margin-bottom 首先...
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-...
Vue+css好看的动态Footer
最新发布
weixin_46006743的博客
11-07 188
Vue+css好看的动态Footer。
css - css页面底部固定的几种方法
热门推荐
qq_43886365的博客
11-25 2万+
css布局中页面 底部固定的几种方法
配置环境变量
qq_45685099的博客
10-14 444
配置环境变量 找到java文件夹 复制地址，让后打开高级系统设置里的环境变量，选择新建 如图，让后确认 再找到Java文件夹，新建如图，然后确认。 配置环境变量## 如图复制地址 再打开环境变量 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知...
八种方法实现CSS页面底部固定
xianzhiding的博客
01-11 6027
当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部， 方法一：footer高度固定+绝对定位 html &lt;div class="dui-container"&gt; &lt;header&gt;Header&lt;/header&gt; &lt;main&gt;Conte...
CSS粘住固定底部的5种方法
weixin_33754065的博客
05-17 542
本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图：· 方法一：全局增加一个负值下边距等于底部高度 有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高...
css粘住固定底部的3种方法
讨口子
07-20 963
实现如图： 方法一：全局增加一个负值下边距等于底部高度 //html代码 <body> <div class="wrapper"> content <div class="push"></div> </div> <footer class="footer"></footer> &l...
HTMl中内容离页面底部距离,CSS 实现内容高度不够的时候底部(footer)自动贴底
weixin_28455801的博客
06-03 3760
在 UI 切图过程中，页面往往由三个部分组成，头部、内容和底部。当页面的内容高度不够撑满屏幕，底部(footer)就跟着内容浮动上来了，小屏幕由于高度有限看不出来异常，但如果是大屏的话，底部下面变会多出很多空白，非常影响美观。方案 1：Flex-Box头部使用 position: sticky; 吸顶，再使用盒子( main )来包住内容( container > content )和底部(...
css 布局底部,CSS贴在底部的布局
weixin_39817215的博客
08-04 1139
CSS 贴在底部的布局, 它始终在页面的底部。http://www.cssstickyfooter.com看这个网页的底部，为什么会跑到那儿去呢？即使内容很少的情况下，它也始终在页面的底部。否则页面底部将留下大量空白。下面是它实现的代码：html, body, #wrap {height: 100%;}body > #wrap {height: auto; min-height: 100%;...
html如何使图片紧靠下方,CSS粘住固定底部的5种方法
weixin_39886841的博客
06-04 3557
本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图：·方法一：全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。cont...
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、付费专栏及课程。

余额充值