首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将div与其父div的底部对齐,同时保持父高度100VH且不使用固定位置

要将div与其父div的底部对齐,同时保持父div的高度为100vh且不使用固定位置,可以使用flex布局来实现。

首先,将父div的样式设置为:

代码语言:txt
复制
.parent {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

这样可以将子元素按照垂直方向排列,并且父div的高度为100vh。

然后,将子div的样式设置为:

代码语言:txt
复制
.child {
  margin-top: auto;
}

通过设置子div的上边距为auto,可以将子div推到父div的底部。

完整的HTML代码如下:

代码语言:txt
复制
<div class="parent">
  <div class="child">Content</div>
</div>

这样就实现了将div与其父div的底部对齐,同时保持父div的高度为100vh且不使用固定位置的效果。

推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供了高性能、可靠稳定的云服务器实例,适用于各类应用场景。您可以根据业务需求选择不同配置的云服务器实例,灵活部署和管理您的应用程序。

产品介绍链接地址:腾讯云云服务器(CVM)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

熟悉HTML页面架构和常用布局

主轴开始位置边框交叉点)叫做main start,结束位置叫做main end;交叉轴开始位置叫做cross start,结束位置叫做cross end。 项目默认沿主轴排列。...属性: flex-start:交叉轴起点对齐。 flex-end:交叉轴终点对齐。 center:交叉轴中点对齐。 space-between:交叉轴两端对齐,轴线之间间隔平均分布。...stretch 如果项目未设置高度或设为auto,占满整个容器高度。...通常一般固定 顶部 和 底部高度, 主体自适应 这样就实现了全屏布局。 可以使用语义化标签,header , main footer. 下面通过 Flex 布局来达到全屏布局效果。...如何进行布局 通过给容器 宽度 和 高度 都 100% , 铺满整个屏幕, 容器 display 为 flex, 使用justify-content: center; 决定 子元素在主轴方向上怎么显示

1.4K20

熟悉HTML页面架构和常用布局

主轴开始位置边框交叉点)叫做main start,结束位置叫做main end;交叉轴开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。...属性:flex-start:交叉轴起点对齐。 flex-end:交叉轴终点对齐。 center:交叉轴中点对齐。 space-between:交叉轴两端对齐,轴线之间间隔平均分布。...stretch 如果项目未设置高度或设为auto,占满整个容器高度。...通常一般固定 顶部 和 底部高度, 主体自适应 这样就实现了全屏布局。可以使用语义化标签, header , main footer.下面通过 Flex 布局来达到全屏布局效果。...如何进行布局通过给容器 宽度 和 高度 都 100% , 铺满整个屏幕, 容器 display 为 flex, 使用 justify-content: center; 决定 子元素在主轴方向上怎么显示

1.6K10
  • 建议收藏!总结了 42 种前端常用布局方案

    使用text-align属性 若元素为行内块级元素,也就是 display: inline-block 元素,可以通过为其父元素设置t ext-align: center 实现水平居中。...如果页面内容不够长时,底部栏就会固定到浏览器底部;如果足够长时,底部栏就后跟随在内容后面。...使用calc函数实现 使用 calc 函数实现方式会比较简单,中间容器最少高度为视口宽度100% - 头部和底部两部分高度即可完成该功能。...Flex方案 实现步骤如下 开启 flex 布局 子元素布局方向修改为垂直排列 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持底部 设置中间部分容器高度为自适应 实现CSS代码如下:...设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持底部 */ min-height: 100vh; } .container { /* 设置 中间 部分自适应 */

    4.2K30

    建议收藏!总结了42种前端常用布局方案

    使用text-align属性 若元素为行内块级元素,也就是 display: inline-block 元素,可以通过为其父元素设置t ext-align: center 实现水平居中。...如果页面内容不够长时,底部栏就会固定到浏览器底部;如果足够长时,底部栏就后跟随在内容后面。...使用calc函数实现 使用 calc 函数实现方式会比较简单,中间容器最少高度为视口宽度100% - 头部和底部两部分高度即可完成该功能。...Flex方案 实现步骤如下 开启 flex 布局 子元素布局方向修改为垂直排列 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持底部 设置中间部分容器高度为自适应 实现CSS代码如下:...设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持底部 */ min-height: 100vh; } .container { /* 设置 中间 部分自适应 */

    4.1K30

    CSS | 视差滚动 | 笔记

    让我们探索和比较 固定背景位置使用 3D 平移。...形成效果称之为 视差滚动 background-attachment 固定背景位置使用CSS创建视差效果最早方法。...视口/视窗 (屏幕可见部分(去除书签栏等, 真正用于渲染页面部分), 非整个浏览器窗口) height:100% 铺满容器高度 height:100vh 铺满屏幕(viewport)高度 "100vh...这些浏览器没有 100vh 高度调整为视口高度变化时屏幕可见部分,而是 100vh 设置为隐藏地址栏浏览器高度。...结果是,当地址栏可见时,屏幕底部部分将被切断,从而破坏了100vh初衷。 如下所示: 当地址栏可见时,由于移动浏览器不正确地100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。

    68021

    CSS-定位(position)

    2.边偏移 边偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线距离 bottom 底部偏移量,定义元素相对于其父元素下边线距离 left 左侧偏移量,定义元素相对于其父元素左边线距离...绝对定位最重要一点是,它可以通过边偏移移动位置,但是它完全脱标,不占位置。 # 级没有定位 若所有元素都没有定位,以浏览器为准对齐(document文档)。...# 级有定位 绝对定位是元素依据最近已经定位(绝对、固定或相对定位)元素(祖先)进行定位。 # 子绝相 这个“子绝相”太重要了,是我们学习定位口诀。...子绝相就是指子元素设置绝对定位,而元素设置相对定位。 换句话说:如果要对一个子元素使用定位的话,让子元素(绝对定位)以其父元素(相对定位)为标准来定位。...固定定位完全脱标,不占有位置,不随着滚动条滚动。 # 叠放次序(z-index) 当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。

    1.5K10

    前端常用布局方案总结

    如果页面内容不够长时,底部栏就会固定到浏览器底部;如果足够长时,底部栏就后跟随在内容后面。...使用calc函数实现 使用 calc 函数实现方式会比较简单,中间容器最少高度为视口宽度100% - 头部和底部两部分高度即可完成该功能。...子元素布局方向修改为垂直排列; (3). 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持底部; (4). 设置中间部分容器高度为自适应。...*/ flex-flow: column; /* 设置最小高度为当前视口,使不管中间部分有多高,始终都可以保持底部 */ min-height: 100vh; } .container...设置最小高度为当前视口,不管中间部分有多高,始终都可以保持底部

    2.6K30

    第213天:12个HTML和CSS必须知道重点难点问题

    如果其父容器没有设置 position 属性,那么偏移是以 body 为依据。注意设置 absolute 属性元素在标准流中不占位置。 **fixed:固定定位。...如果有非浮动元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素 浮动元素会尽可能地向顶端对齐、向左或向右对齐 重叠问题 行内元素浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上...3.3 清除浮动方法 方法1:给div定义 高度 原理:给DIV定义固定高度(height),能解决DIV 无法获取高度得问题。...,让DIV能够获取高度。...不推荐使用 方法四:div定义 display:table 原理:div属性强制变成表格 优点:不解 缺点:会产生新未知问题。

    2.3K20

    CSS Flexbox 布局完全指南 (一):4000字,多示例讲解

    align-items: flex-start} 这样图片不会拉伸,而是保持它们默认宽和高。 如下所示,它们会在纵向保持首部对齐。 ?...使用 Flexbox 如下布局: .card { flex: 0 0 250px} 这个样式 flex-grow 和 flex-shrink 值设为 0, flex-basis 值为 250px...卡片在页面内靠左上角对齐,因为 justify-content 值默认为 flex-start。 同时,卡片垂直拉伸充满整个元素高度,因为 align-items 默认值是 stretch。...一组列宽度相同基础网格 这些网格有以下特点: - 网格单元格平均布局并充满整行 - 单元格高度一致 使用 Flexbox 很容易实现这个效果,看下面这个标识文本: <div class="row"...整行三个元素都靠底部对齐 嵌套网格 只需要简单设置,rows(行元素)就可以嵌套布局。 ? 一行内有两个元素,其中一个是另一个两倍大小。

    4.5K20

    一个前端开发对于Flex布局总结(图解,简单易懂,全)

    2.3 flex-flow属性(排列方向&换行简写)# flex-flow属性是flex-derictionflex-wrap属性简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列换行...默认stretch:如果项目没设置高度,或高度为auto,则占满整个容器; flex-start:纵轴紧贴容器顶部; flex-end:flex-start相对,纵轴紧贴容器底部; center...:最常使用,在纵轴中心位置排列,也就是居中对齐; baseline:比较特殊,它让项目以第一行文字基线为参照进行排列; 注意,常理来说justify-contentalign-items默认分别处理项目横轴...stretch(默认):即在项目没设置高度,或高度为auto情况下让项目填满整个容器,align-items类似。注意,如下演示13个项目我均没有设置高度。...如果没元素,则默认stretch。 用于让个别项目拥有与其它项目不同对齐方式,各值表现容器align-items属性完全一致。 4 源码# <!

    1.7K20

    CSS 实用手册

    父子元素中,永远都是子压在上,是不受 z-index 影响 49. display 显示方式 语法:display:value (1). none 指定元素不显示 并且不占据页面空间(脱离文档流...主轴终点对齐 C. center 居中对齐 D. space-between 两端对齐,项目之间距离是相等 E. space-around 每个项目两侧间距是相等,注意:项目项目之间间隔,要比项目元素之间间隔大一倍...,如果项目不设置高度高度为 auto 时,那么项目沾满整个容器高度 ⑥. align-content 定义了多跟轴线对齐方式,如果项目只有一根轴线,该属性无效 A. flex-start 交叉轴起点对齐..., 交叉轴为主轴相反轴 B. flex-end 交叉轴终点对齐, 交叉轴为主轴相反轴 C. center 交叉轴中间对齐, 交叉轴为主轴相反轴 D. space-between 交叉轴两端对齐...元素高度如果参照上级元素设为100%,那么在弹性布局时,子元素也参照元素设为100%,子元素无法显示,解决方案时子元素设为固定高度 63.

    2.7K10

    让图片完美适应:掌握 CSS object-fitobject-position

    免费体验 Gpt4 plus AI作图神器,我们出钱 体验地址:体验 在CSS中,我们可以使用 background-size 和background-position属性为背景图像设置大小和位置...这个指定区域可能有固定宽度和高度,或者可能是一个更具响应性空间,如根据浏览器视口大小变化网格区域。...设置 为了详细说明 object-fit 属性工作原理,我们图像放在一个使用Grid布局居中 div 中。...none 值保持图像正常大小,因此在容器中看不到图像顶部、底部和两侧。 再次注意,默认情况下,图像中心内容框中心对齐。...更好选择可能是iframe宽度设置为可用空间width: 100%,然后使用aspect-ratio属性来保持其比例。

    56610

    49个常用CSS代码片段,建议整理收藏

    属性说明如下: text-shadow: [X-offset,Y-offset,Blur,Color]; X-offset:指阴影居于字体水平偏移位置。...如果使用100%,会根据高度来决定,所以使用100vh单位。...内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 保持原有尺寸比例。长度和高度中长那条边跟容器大小一致,短那条等比缩放,可能会有留白。...cover: 保持原有尺寸比例。宽度和高度中短那条边跟容器大小一致,长那条等比缩放。可能会有部分区域不可见。(常用) none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。...同时需要注意是line-height高度基于font-size(即字体高度),如果文字要转行会出现异常哦。 本文完~

    2.1K30

    前端成神之路-定位

    bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线距离。 left left: 80px 左侧偏移量,定义元素相对于其父元素左边线距离。...元素要有定位 元素依据最近已经定位(绝对、固定或相对定位)元素(祖先)进行定位。 ?...哈根达斯分析 一个大 div 中包含 3 张图片; 大 div 水平居中; 2 张小图片重叠在广告图片上方 —— 脱标,不占位置,需要使用绝对定位; 2 张小图片分别显示在左上角和右下角 —— 需要使用边偏移确定准确位置...案例小结: 子绝相 —— 子元素使用绝对定位,元素使用相对定位; 浮动对比: 绝对定位:脱标,利用边偏移指定准确位置; 浮动:脱标,不能指定准确位置,让多个块级元素在一行显示。...不需要级 注意: 边偏移需要和定位模式联合使用,单独使用无效; top 和 bottom 不要同时使用; left 和 right 不要同时使用

    1.9K20

    CSS第五天-定位

    CSS第五天-定位 静态定位:static 定位默认值,写边偏移也不会有效果 ---- 相对定位:relative 元素搭配子绝使用 根据自身原来位置,进行定位 没有脱标,在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)祖先元素来定位 子绝相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...顶部对齐 middle 中部对齐 bottom 底部对齐 ---- 精灵图: 测量图片左上角坐标,分别取负值设置盒子background-position:x y 合并成一张大图片,这张大图片称之为精灵图...减轻服务器压力,提高页面加载速度 ---- 背景图片大小:background-size background-size:宽度 高度 /百分比 contain 等比例缩放 cover 背景图片等比缩放...设置vertical-align: middle ---- 垂直用法: 文本框和表单按钮无法对齐 input和img无法对齐 div文本框,文本框无法贴顶问题 div不设高度由img标签撑开,此时

    2.7K40

    Web-CSS

    important > 行内样式 > ID选择器 > 类伪类选择器 > 标签选择器 > 通用选择器 权重相同时,后面的样式会覆盖前面的样式 继承自元素权重最低 ---- 3.颜色 预定义颜色值...图片可以保有其原有的尺寸,或者拉伸到新尺寸,或者在保持其原有比例同时缩放到元素可用空间尺寸。...比如说,你可能希望某个段落浮动元素保持相邻位置,但又希望这个段落从头开始强制独占一行。此时可以使用clear。 取值: left:清除左侧浮动。 right:清除右侧浮动。...取值: flex-start:元素向主轴起点对齐。 flex-end:元素向主轴终点对齐。 center:元素在侧轴居中。 stretch:弹性元素被在侧轴方向被拉伸到容器相同高度或宽度。...第一行垂直轴起点边和容器垂直轴起点边对齐。接下来每一行紧跟前一行。 flex-end:所有行从垂直轴末尾开始填充。最后一行垂直轴终点和容器垂直轴终点对齐同时所有后续行前一个对齐

    8.6K20

    关于 vertical-align 你应该知道一切

    float:只能对齐它们顶部,而且可能导致布局塌陷,需要手动清除 position:absolute:会使元素脱离文档流,以致于它们不能影响周围元素 手动添加内外边距方法:需要元素高度固定 transform...top bottom 对于内联元素,指的是元素顶部(底部)和当前行框盒子顶部(底部对齐;即 line-box 顶部(底部对齐。...text-bottom,指的是盒子底部级内容区域底部对齐,即 content-area 底部对齐。 例子如下: ?...子元素垂直中心线级元素基线位置往上二分之一 X 高度(X 中心) 所在线对齐,通俗一点讲,就是图中红线表示元素垂直中心线,蓝线表示子元素垂直中心线,可以明显看到 蓝线 X 中心保持一致...那如果高度是随着内容变化而变化怎么办?此时无法给级设置一个特定值,也不能使用百分比,因为 line-height 是根据字体大小来计算

    2.7K20

    探秘 flex 上下文中神奇自动 margin

    但是如果我们想让元素相对元素垂直居中的话,使用 margin: auto 0是不生效。...本文暂且不谈 grid 布局,我们业务中需求中更多可能是使用 flex 布局,下文着重围绕 flex 上下文中自动 margin 一些表现。...Codepen Demo -- nav list by margin left auto 垂直方向上多行居中 OK,又或者,我们经常会有这样需求,一大段复杂布局中某一块,高度或者宽度不固定,...要求:页面存在一个 footer 页脚部分,如果整个页面的内容高度小于视窗高度,则 footer 固定在视窗底部,如果整个页面的内容高度大于视窗高度,则 footer 正常流排布(也就是需要滚动到底部才能看到... .g-container { height: 100vh; display: flex;

    1.5K40
    领券