底部 footer 自适应
底部 footer 自适应在底部
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
css
.wrap {
position: relative;
width: 300px;
height: 500px;
overflow-y: auto;
margin: 100px auto;
border: 1px solid;
}
.content-wrap {
min-height: 100%;
text-align: center;
background-color: azure;
}
.content {
padding-bottom: 40px;
}
.footer {
margin-top: -40px;
background-color: #00adb5;
line-height: 40px;
color: #fff;
text-align: center;
}html
<section class="wrap">
<div class="content-wrap">
<input class="s-input" type="checkbox">
<label>隐藏</label>
<div class="content">
<p class="s-text">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>
</div>
</div>
<footer class="footer">
footer
</footer>
</section>本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 kshao-blog-前端知识记录！
微信- 支付宝
相关推荐
2024-05-15
【CSS】解决外边距重叠（重合）引起的 margin 垂直方向（top、bottom）不生效，无作用的问题
随着各种 UI 库的使用，像这种问题在业务中可能都很少接触，但是仍需了解其现象和解决方案。 一键直达 相邻兄弟元素的外边距重叠 父级与子级的外边距重叠 空块级元素的外边距重叠 什么是外边距重叠 —— Margin Collapsing 当块级元素（Block）的上下外边距与其相邻或嵌套的块级元素外边距重叠时，外边距会合并为一个外边距，而不是相加。这种行为成为外边距重叠。（浮动和绝对定位的元素不会发生外边距重叠） 外边距重叠只会发生在块级元素（Block）上，例如 div、p、section 等。 外边距重叠计算规则示例元素 <div class="css-fix-margin-item-parent"> <div class="css-fix-margin-item-child">child div</div> </div> 两个正数的外边距取最大的边距作为外边距 一个正数一个为负数，外边距为两者之和 .css-fix-margin-item-parent { margin-top: 20px; ...
2023-07-19
【CSS】解决移动端（高清方案）下在谷歌浏览器中出现 字体大小布局异常，和设置的 font-size 不符（Text Autosizer、Font Boosting）
最近在谷歌浏览器调试移动端高清方案时，发现设置的字体大小竟然和实际显示的字体大小不一致？可以移动端 ua 打开此页面测试下方 demo。fontSize => 设置字体大小；actualSize => 实际展示字体大小 .font-boosting-wrap { } .font-boosting { } .font-boosting li { /*font-size: 22px;*/ } .font-boosting-size-wrap { font-size: 16px; /*text-size-adjust: none;*/ } .font-boosting-button { /*font-size: 22px;*/ } li 的 fontSize: fontSize: actualSize: auto set text-size-adjust ...
2023-06-13
【CSS】主流 UI 库都在用的逻辑伪类选择器 not、where、is、has
目前 Css 关于逻辑选择器：:not、:is、:where、:has，除了 :has 比较新以外，其他选择器在一些 UI 库中都有广泛的使用，浏览器基本都已经支持了，一起卷起来，使用更先进的选择器~ :notMDN: :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。 <ul class="css-selectors selector-not"> <li>1</li> <li>2</li> <li>3</li> </ul> .selector-not { li:not(:first-child) { border: 1px solid red; } } .css-selectors { margin: 20px auto; width: 50%; border: 1px solid #000; } ...
2024-05-14
【CSS】CSS-Nesting：CSS 嵌套写法 —— 有望替代 less sass 的原生嵌套
现在 CSS 也有了嵌套写法，“不再需要” less sass 等预处理器，原生 CSS 就可以实现嵌套写法，可以减少代码量，提高代码可读性，让 CSS 更加优雅~哦，没人写 css 了是吧 QAQ CSS-Nesting 从 Chrmoe 112 开始，原生 CSS 就可以支持嵌套语法了（你不会还是旧版本吧？？？？） 语法 MDN 示例 /* Without nesting selector */ parent { /* parent styles */ child { /* child of parent styles */ } } /* With nesting selector */ parent { /* parent styles */ & child { /* child of parent styles */ } } /* the browser will parse both of these as...
2021-07-27
css 指定方向模糊 - 鸿蒙开机效果（animation 事件）
<svg> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="0 2" /> </filter> </svg> 直截了当，没错是用 svg 来实现，其实 css 的样式与 svg 还是蛮接近的（一模一样） 效果使用 未使用（使用 blur） 鸿蒙开机效果<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> </head> <style> body { margin: 0; height: 100vh; display: block; } .ct-circle-content { --circle-width: 100px; --circle-height: 100px; ...
2020-12-25
css 文字渐入效果，css 变量的进一步使用 setProperty
通过 js 修改 css 变量来更简单的实现动画效果，dom.style.setProperty 的使用 setPropertyconst a = document.querySelector('xx'); xx.style.setProperty(name, value); 顺带记一下获取的 // 该方法获取的值带 `单位` getComputedStyle(a).getPropertyValue('--x'); demo .iphoneText-wrap { margin: 100px auto; width: 400px; height: 400px; background-color: #000; overflow-y: auto; } .text { height: 300%; } .ihone-title { display: block; text-align: center; --x: 0%; position: sticky; top: 50%; transform:...
评论
最新文章
