如何让div占据剩余的高度

最新推荐文章于 2023-01-03 09:15:27 发布

m0_37653407

最新推荐文章于 2023-01-03 09:15:27 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/m0_37653407/article/details/103821230

本文介绍了一种简单的方法，使div元素能够占据其父级容器的剩余高度。通过使用CSS的Flexbox布局，设置父级div为display:flex和flex-direction:column，再将目标div的flex属性设为1，即可实现这一效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何让div占据剩余的高度

1、父级div设置：
display: flex;
flex-direction: column;
2、设置该div：
flex: 1;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

m0_37653407

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

一个div宽度或高度固定，另一个div铺满剩余空间

ASIA_技术

08-31

4157

直接上代码：宽度确定：利用了BFC原理 //方案一 <body style="margin:0;padding:0;height:100%;width:100%;position:absolute;"> <div style="background-color:#c7c7c7;width:300px;height:100%;float:left;"> </di...

如何将div高度填满剩余高度

weixin_33759269的博客

02-15

1353

下列代码中navbar高度为30px，content高度需要填满浏览器的剩余高度＜div id="body"＞＜div id="navbar"＞＜/div＞＜div id="content"＞＜/div＞＜/div＞ css如下： html, body { padding: 0px; margin: 0px; ...

参与评论您还未登录，请先登录后发表或查看评论

div自适应高度自动填充剩余高度

01-19

方案1： Html：头部DIV 下部DIV CSS： html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; } .A { height: 100px; background: #BBE8F2; positi

使一个 div 填充剩余屏幕空间的高度

HuntsBot的博客

01-03

3338

我正在开发一个 Web 应用程序，我希望内容填满整个屏幕的高度。该页面有一个标题，其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。我有一个标题 div 和一个内容 div。目前我正在使用一个表格进行布局，如下所示：CSS 和 HTML#page { 高度：100%;宽度：100% } #tdcontent { 高度：100%; } #content { 溢出：自动； /* 或溢出：隐藏； */ } ... ...页面的整个高度被填满，不需要滚动。对于

占满DIV剩余高度的三种方法

qq_22936647的博客

09-05

2万+

着重介绍第二种第一种，老套路，浮动大法代码：效果图：绿色DIV占满了外层DIV 第二种：calc CSS计算代码：这里在类名为div2的DOM外又加了一层div，主要就是为了说明，如果利用calc(100% - 50px);这种模式，那么这个DIV的父元素必须指定高度，可以是具体值，也可以是百分比，特别是dom结构嵌套很深的时候，特别好...

DIV占满剩余高度

weixin_34342992的博客

05-17

418

需求： 1. 这个矩形的高度和浏览器窗口的高度相同，不能出现...

css div填满剩余高度

朝阳39的博客

09-01

2492

<div class="father"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> 核心要点子绝父相同时设置top和bottom来填充剩余垂直空间 .father { /* 父元素必须设置为相对定位，否则子元素会相...

CSS代码：三个div标签，第一个div占据左侧，100%页面高度，100px宽度。第二、三个div在右侧上下分布，占据右侧剩余的宽度。第二个div60px高。第三个div占据剩余的页面高度。

05-25

可以这样写CSS代码： ```css .left { width: 100px; height: 100%; float: left;... background-color: red;...<div class="left"></div> ...使用 `calc()` 函数计算出右侧下方的 `bottom` div 占据剩余的页面高度。

在DIV内，用一个DIV 填空剩余高度

最新发布

12-02

在HTML中，如果你想要在一个`<div>`内填满其父元素的剩余高度，可以使用CSS Flexbox 或者 Grid 来实现。这里有两个常见的方法： 1. **Flexbox** 方法: ```html <div class="parent"> <div class="child flex-...

怎么让div占满剩余的高度

10-18

3. **Positioning and absolute/fixed**: 使用`position: absolute`或`position: fixed`结合百分比宽度和`top: 0`, `bottom: 0`可以让`<div>`跟随屏幕底部，占据剩余高度。不过这适用于固定宽高的情况，不是响应式...

DIV撑满剩余高度，未知高度垂直居中

chose_DoIt的博客

03-27

925

css3 transform:translateY 未知垂直居中 // 相对于父组件进行绝对定位，top 50%，再用CSS3属性 transform: translateY(-50%) 设置Y轴-50%即可 parentElement{ position:relative; } childElement{ position: absolute...

css 剩余空间,CSS DIV高度撑满剩余空间

weixin_36414025的博客

08-03

1913

页面高度为百分百情况下，内容div实现自动撑满剩下的位置头部区域高度为110rpx，内容区域div实现自动撑满剩下的位置。如果将div 高度设置为100%，会造成多出头部的110rpx,会有滚动条显示！.content{width: 100%;height: 100%;box-sizing: border-box;position: relative;.search_box{position: r...

【CSS】一个div宽度或高度固定，另一个div铺满剩余空间

qing_小诺的博客

08-30

1万+

如果我们想实现下图的效果（一行中放两个div，左边的一个div宽度固定，右边的div横向铺满）：首先我们先写三个div：父div包裹两个div。 <body> <div class="content"> <div class="left">left</div> <div class="righ...

CSS实现div填满剩余高度

热门推荐

慕子墨

01-20

5万+

需求： nav和content盒子的高度和浏览器高度相同，且不能出现纵向滚动条绿色盒子高度固定，比如：50px 紫色盒子填充剩余的高度 BODY部分的代码：方式一：绝对定位方式二：box-sizing的两种方法 1. 方法一： 2. 方法二：总结：这三种方法可以实现content盒子填充剩余部分的高度，且没有纵向滚动条，网上的flex布局还是会出现纵向滚动条，不推荐。 ...

移动端div自动填满剩余高度

qq_43186310的博客

08-11

1653

移动端div自动填满剩余高度 1、移动端，高度不确定。 2、前面内容高度也不确定。 3、剩下的div需要填满余下的高度做一些事情 4、网上查找了一些，自己试了试，觉得用flex挺方便的。下面展示一些内联代码片。 // div box下包含三块，最后一块是需要高度自动填满的 <div class="box"> <div class="c1"></div> <div class="c2"></div> <div class="c3"&g

css实现div的高度填满剩余空间_css深入浅出

weixin_30345873的博客

11-29

2722

文档流：文档内元素的流动方向内联元素从左往右块级元素从上往下block，inline，inline-block 元素的区别：block 元素独占一行，宽度占满父元素宽度。可以设置 width, height, padding, margin 属性。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素，比较特别的是 <p> 只能包含 inlin...

div 自适应高度自动填充剩余高度

m0_63642127的博客

04-17

4121

1.方案一：使用定位 html： <div class="outer"> <div class="A"> 头部DIV </div> <div class="B">下部DIV </div> </div> css： html, body { height: 100%; padding: 0; margin: 0; } .outer { height: 100%; position: rela

HTML+CSS实现div的高度自适应填满剩余空间的7种方法

panzheng0920的专栏

07-13

1万+

CSS实现div填充剩余高度转发:https://my.oschina.net/linsk1998/blog/3005190 如图上下两部分，上面部分适应内容的高度，下面部分填充剩余部分。当下面内容不够时，在下面部分出现滚动条有2种情况 1.上面内容的高度适应内容，只有2种方法（flex、quirks+table） 2.上面内容为固定高度，除了上面2种方法，方法还有（borderbox、position:fixed、top+bottom、javascript、...