CSS 子级元素固定在父级元素底部

最新推荐文章于 2024-05-14 10:21:36 发布
最新推荐文章于 2024-05-14 10:21:36 发布
阅读量8.5k 收藏 7
点赞数 6
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwqBrell/article/details/100337773
版权

前端开发中学会让子级固定在父级元素的底部的技巧很有用哦。

实现效果：

案例源码

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子级元素固定在父级元素底部</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			.box1 {
				height: 200px;
				background: #999999;
				/* 相对定位 */
				position: relative
			}

			.box2 {
				width: 100%;
				height: 40px;
				background: #AAAAAA;
				/* 绝对定位 */
				position: absolute;
				bottom: 0
			}
		</style>
	</head>

	<body>
		<div class="box1">
			父级元素
			<div class="box2">
				子级元素
			</div>
		</div>
	</body>
</html>

要点分析

其一：父级元素用相对定位

其二：子级元素用绝对定位

 

Trevor Lan
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
CSS 子级元素固定在父级元素底部 - css
survivorsfyh的博客
02-20 5203
日常开发中经常会遇到类似移动端底部 Tabbar 的效果，将子元素固定在父级元素底部的情况； 首先，需要配置子父视图的宽高 em: 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； ex: 依赖于英文字母小 x 的高度 ch: 数字 0 的宽度 rem: 根元素（html）的 font-size vw: viewpoint width，视窗宽度，1vw=视窗宽度的1% vh: viewpoint height，视窗高度，1vh
将一个div固定在父元素的底部
weixin_62462734的博客
05-29 2536
使用flex布局，父元素纵向排列，子元素margin-top:auto----将自身顶部与剩余空间左对齐，即固定在底部。
2024年最新【CSS】CSS入门笔记第二弹~_css 父元素(1)，【一篇文章搞懂】
最新发布
2401_84616027的博客
05-14 362
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;属性值：none left right。
解决CSS中子元素z-index与父元素兄弟节点的层级问题
01-19
1.问题的出现 写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。 元素的结构大致如下： <div class=list> <div class=unit> <div class=content>列表项1</div> <div class=hover>弹出框1</div> </div> <div class=unit> <div class=content>列表项2</div> </div>
Css之子元素位于父元素底部居中
weixin_45346457的博客
11-24 1016
.product-subContainer { position: relative; .button-blue { position: absolute; bottom: 0.1rem; left: 0; right: 0; margin: 0 auto; } } } 父相对子绝对
将一个元素一直固定在父元素的底部
zzj19990913的博客
02-04 2958
这次遇到的问题是：需要将一个元素放在div的底部，并且随着父级元素的变化不改变位置。如果使用absolute 来进行定位，就会使元素脱离文档流，在父元素变化时就可能会改变原来的位置，这时候可以使用flex布局来对元素进行定位。具体方法见https://blog.csdn.net/weixin_30915951/article/details/95007111 ...
如何让子盒子在大盒子中沉底显示？
woshishazia__的博客
06-28 958
绝对定位、flex布局
父元素出现滚动条时如何定位到子元素
东东东东东辉
03-20 798
父元素出现滚动条时如何定位到子元素 $("#dataList").scrollTop($("#dataList").scrollTop() + $('.list-item').offset().top - $("#dataList").offset().top);//定位到对应表上
CSS清除浮动使父级元素展开的三个方法
09-25
一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开，下面举个例子为大家详细介绍下，希望对大家有所帮助
详解八种方法实现CSS页面底部固定
09-22
主要介绍了详解八种方法实现CSS页面底部固定的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
利用CSS使footer固定在页面底部的实例代码
09-24
下面小编就为大家带来一篇利用CSS使footer固定在页面底部的实例代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css 块状元素和内联元素
12-12
在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看...
如何让子元素居于父元素底部
热门推荐
woshizhushiqiu的博客
07-18 2万+
如何让子元素居于父元素底部？其实这是个很简单的问题，只是父元素和子元素的css都需要修改一下： .parent{ position: relative; width:200px; height: 100px; background: dodgerblue; } .content{ position: absolute; width: 200px; height: 30px; ba
【面试篇】不知道父元素宽高的情况下，实现元素的水平垂直居中
qq_42816270的博客
01-08 90
【面试篇】不知道父元素宽高的情况下，实现元素的水平垂直居中
CSS关于子元素溢出
weixin_46507557的博客
01-22 881
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box1{ background-color: #008000; width: 400px; height: 400px; /* * 如果子元素的大小超过了父元素，则子元素会从父元素中溢出 overf
实现子元素绝对定位在父元素某处
心若向阳 无谓悲伤
06-03 1238
实现子元素定位在父元素某处1、需求2、思路3、实现4、效果 1、需求 实现子元素固定在父元素的某一位置 2、思路 父级元素设置 相对定位 position: relative，子级 元素设置 绝对定位 position: absolute， 然后再针 对子元素设置相应的方位bottom等属性值（如将bottom设置为0，表示的是子元素定位在距离父元素底部的0px距离处，即子元素定位在父元素底部） 3、实现 PS：固定的方位可自行设置 <div style="height: 500px;wid
CSS浮动定位
zxw_2093597991的博客
05-25 195
1、浮动 行内元素：span 、img、strong... 行内元素能包括在块级元素内，块级元素不能包括在行内元素内 块元素：h1-h6、p、div…… 行内元素块元素转换：display：block； block块元素、inline行内元素、inline-block是块元素但是可以内联、none消失隐藏 左右浮动：float：right； right右浮、left左浮 清除浮动：clear：both； both两侧不允许浮动、right右侧不允许浮动、left左侧不允许浮动 小结：...
CSS基础：div的position展示（搭配static、absolute、relative、fixed、sticky使用）
Alley_Olive的专栏
07-05 346
CSS基础：div的position展示（搭配static、absolute、relative、fixed、sticky使用）
css 父级设置了padding，但是子元素还是会超过padding解决方案
Technology_hands的博客
11-22 2282
我看了一下，是因为子元素，设置了width100%,以后还设置了padding,导致的问题，因为我们的盒子是标准盒子模型，width的宽度只是内容content的宽度，加上padding就会导致大于100%，所以有两个解决方案，一个是将盒子模型转换成怪异盒子模型，（box-sizing:border-box），一个是在移动端不要使用width:100%，的情况下就使用padding就不会超过100%。由上图所示，明明父级已经设置了一个padding,但是子元素还是跑出来了，这是为什么呢？
css怎么让文字居于底部
04-28
在CSS中，可以使用vertical-align属性来控制元素中的文本的垂直对齐方式。如果想要使文本居于底部，可以将vertical-align设置为bottom。 例如，可以使用以下代码来将文本居于底部： ``` <p style="height:100px; line-height:100px; vertical-align:bottom;">这是一段居于底部的文本</p> ``` 在这个示例中，设置了一个固定高度和行高，并将vertical-align设置为bottom。这使得文本垂直对齐到底部，与容器的底部对齐。 还可以使用相对定位的方式，将元素的底部与容器的底部对齐，例如： ``` <div style="position:relative; height:200px;"> <p style="position:absolute; bottom:0;">这是一段居于底部的文本</p> </div> ``` 在这个示例中，使用了相对定位来将<p>元素相对于其父元素进行定位，将bottom设置为0以使其位于容器底部。这样，内容就能够垂直对齐到底部了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值