子div在父div居底【已使用】

CSS布局技巧
最新推荐文章于 2023-05-29 09:54:42 发布
转载 最新推荐文章于 2023-05-29 09:54:42 发布 · 4.7k 阅读 · 1

本文介绍了一种使用CSS实现子元素在父元素底部定位的方法。通过设置父元素为相对定位，子元素为绝对定位并将其底部边界设为0，使得子元素紧贴父元素底部。这是一种常用的网页布局技巧。

转自：http://blog.sina.com.cn/s/blog_92d6237201016jhs.html

简单的一个需求， 映射着常常被忽略的知识啊。
上次面试没写出来，得学习。

·思路及要点：

父div的位置设置成相对的，即“position: relative;”。
而子div的位置设置成绝对的，并且下边缘设为0，即“position: absolute; bottom: 0;”。

 · 代码：

<head>
      <title>子div在父div中置底</title>
      <style type="text/css">
            .father { width: 500px; height: 600px; position: relative; background-color: AliceBlue; }
            .child { width: 400px; height: 100px; position: absolute; bottom: 0; background-color: AntiqueWhite; }
      </style>
</head>
<body>
      <div class="father">
            <div class="child">
            </div>
      </div>
</body>
</html>



·理论简介


Bootstrap4导航栏
m0_46832289的博客
09-16 1013
<body> <!--定义一个标准导航栏--> <nav class="navbar navbar-inverse navbar-expand-sm"> <!--定义导航栏的Logo部分--> <div class="navbar-header"><a href=“#”class="navbarbrand">Dreamtrue!</a></div> <!--定义导航栏中的选项部分--> <div
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
父元素属性之 justify-content  justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） ...
将一个div固定在父元素的底部
weixin_62462734的博客
05-29 4195
使用flex布局，父元素纵向排列，子元素margin-top:auto----将自身顶部与剩余空间左对齐，即固定在底部。
前端——CSS：设置元素背景
Searchin_R的博客
09-23 3137
设置元素背景一共分为两类，一类是设置元素背景颜色，一类是设置元素背景图片。 1、设置元素背景颜色 元素背景颜色通过background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。该属性可以为所有元素设置背景色，比如body，以及em这类行内元素。 background-color无法被继承，如果不设置颜色，它默认为transparent，即透明背景色。如果该元素有父元素，...
将子div在父div中固定在底部(类似剩余电量的效果)
wsyn的博客
07-13 4488
有时候要实现图片那样剩余电量的效果，将子div固定在父div的底部，这个就需要用到css的相对低位：relative。 实现起来还是很简单的： （1）给父div添加样式： position:relative; （2）给子div添加样式： position: absolute; bottom: 0; 同样的，如果是要靠右、靠左等等，只需要将 bottom: 0; 改成 right
div位于父容器底部
yingzhicai的博客
04-14 2万+
先上效果图，重点是父容器设置position属性为relative,子div的position设置为absolute    例子 html{ width: 100%; height: 100%; } *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; } .parent
html怎么设置在一个div的右侧,关于html：如何将另一个div中的2个div对齐到底部和左侧/右侧...
weixin_35618539的博客
05-30 2228
我有这个代码HTMLCSS.head {height:110px;position:relative;}.menu {float:left;position:absolute;bottom:0px;}.search {float:right;position:absolute;bottom:0px;}我想做的是将div"menu"放在div"head"的左下方，将div"search"放在div"...
div居底部显示怎么用css规定
09-11
根据用户当前的需求，用户想要查找使用CSS让div居底部显示的方法。结合之前的对话历史，用户已经提供了三个引用，这些引用展示了不同的方法来实现div底部定位。我将整合这些方法，并提供一个全面的回答。 ### 方法...
怎么让div 里的div 垂直排列，且第二个处于父div的右下角，第一个处于父div的中间
最新发布
10-30
我们有一个父div，里面有两个子div。要求： 1. 子div垂直排列（即上下排列） 2. 第一个子div位于父div的中间（水平居中，垂直方向上也居中？还是仅水平居中？题目没有明确，但通常“中间”指的是水平垂直都居中） ...
请使用vue2技术+css给我写一个原生的菜单栏，样式和elementUI的nav菜单栏相似，当鼠标滑入主菜单项时，在菜单项下方弹出显示一个子菜单弹框，宽度要求占满全屏，高度为400px并且也支持鼠标移入子菜单弹框，当鼠标离开主菜单项并且离开子菜单弹框时，再让子菜单弹框消失隐藏，当鼠标在移入子菜单弹框的时候，必须让子菜单弹框正常显示；子子菜单弹框里新建两个子div，一左一右，左边的子div的宽度为25%，高度占满父容器；右边的子div的宽度为75%，高度占满父容器；在右边的子div里再使用ul和li标签生成一些子菜单项；请在data里定义一个menuList，随机生成数十个菜单进行渲染菜单列表
04-17
- 将子菜单作为主菜单组件的一部分，使用fixed定位，这样不受父容器限制。 - 使用事件处理，当鼠标进入主菜单项时，显示子菜单；当鼠标离开主菜单区域（包括子菜单）时，隐藏子菜单。这可能需要将主菜单项和子菜单...
子div在父div中置底
diligentcat的专栏
08-08 4548
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">     子div在父div中置底             .father { width
实现子div在父div的底部
Michael_Lbs的博客
06-29 9388
转自:出处 ·思路及要点： 父div的位置设置成相对的，即“position: relative;”。 而子div的位置设置成绝对的，并且下边缘设为0，即“position: absolute; bottom: 0;”。  · 代码：     子div在父div中置底             .father { width: 500px; hei
父与子元素的背景色设置
MelodyFreedom的博客
07-21 2359
1、如下代码 div class="fatherdiv"style="background:red;height:200px;width:200px;"> div class="childrenDiv" style="backgound:blue;height:20px;width:20px;">div> div>两个div颜色均可以显示。2、如下代码 .fatherdiv{
vue子组件调用父组件的方法
coldriversnow的专栏
10-11 4619
【代码】vue子组件调用父组件的方法。
Vue让父组件改变背景色
m0_57202083的博客
11-02 943
<template id="erZi"> <div> <!-- 使用 $emit --> <!-- <button @click="$emit('change-bgcolor')">想让 父组件中的 背景色</button> --> </div> </template> <div .
点击按钮改变颜色------Vue父子组件通信
SDAW_1的博客
08-20 1528
目标：点击父组件中按钮修改子组件颜色，点击子组件中按钮修改父组件颜色 父组件： //父组件 <template> <div id="app" :style="{background:cl002}"> <btn01 :color01='cl01' @colorDate="cpnClick"></btn01> <button @click="btnClick01">变红</button> </div&gt
前端：如何让div一直处于页面底部
YSJ367635984的博客
07-20 3万+
我们分两种情况来看待这个问题 情况一：基于fixed布局的定位 像这个页面一样，无论你怎么滚动滚动条，这个导航栏一直都在页面顶部，不受页面高度的影响，而且一直在你的视线当中 这种设置比较简单，我们只需要在你需要div上加一个fixed属性就可以。 position: fixed; 情况二：基于绝对布局的定位 这种情况是我们需求最多的一种，比如每个网站后面都有一个尾部声明，而且这个网站的每个页面都是不变的样式与内容。 而情况二与情况一不同之处在于： 情况一一直在我们视线当中。 情况二需要我们滚动到页面最底
CSS div水平垂直居中和div置于底部
热门推荐
Get Things Done
07-26 8万+
一、水平居中 .hor_center { margin: 0 auto; } 二、水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_center { position: absolute; top: 50%; left: 50%; ma
html 怎么让div居下,html怎样让div居中
weixin_35203962的博客
06-20 1916
html让div居中的方法：1、通过加“内容”标签让div居中；2、在div中加入“margin:0 auto属性;”自动调节居中。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。DIV居中提供两个方法：1、简单快捷方法就是加内容标签。示例：center居中我要居中啦2、div中加入margin:0 auto属性;自动调节居中。示例2：margin...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值