HTML 父元素需要超过浏览器窗口高度时子元素无法撑开父元素的解决办法

最新推荐文章于 2024-05-21 18:11:13 发布
最新推荐文章于 2024-05-21 18:11:13 发布
阅读量989 收藏 1
点赞数
分类专栏： css 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42012626/article/details/106291121
版权

HTML 父元素需要超过浏览器窗口高度时子元素无法撑开父元素的解决办法

当父元素无法撑开或者高度和规划的布局不一致时，一般是子元素的浮动引起的。

解决办法是为父元素设置overflow：hidden属性

但是有时候子元素的累计高度超过了浏览器窗口高度，以至于最下面的子元素无法显示时

我们可以在子元素和父元素之间新增一个中间元素，用中间元素作为原子元素的父元素，并为其添加overflow属性，同时取消掉原父元素的overflow属性
枫姿雾雨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html中解决父元素高度问题,18.css 解决浮动后 div 子元素无法撑起父元素的高度问题...
weixin_42515822的博客
06-07 1337
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题问题代码.box1{border: 10px red solid;}.box2{wi...
解决子容器全部浮动时父容器高度不能自动撑开的方法
09-25
刚入门网站设计布局的开发者肯定会碰到这样的问题，那就是当子容器全部浮动的时候，父容器的高度不能自动撑开,今天偶也遇此问题，需要了解的朋友可以参考下
详解关于浮动元素float使其父元素高度塌陷的原因及解决方法
11-21
浮动元素使其父元素高度塌陷我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。 从以上两张图中可以看出添加浮动元素后，li元素按照规则横向排列，但是父元素却消失不见了。   为父元素添加一个5px的边框，在li元素添加浮动后，边框并没有被内容撑开。 在第一个示例中仿佛父元素消失了，但在第二个示例中发现其实父元素并没有消失，只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后
子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度
热门推荐
冰冰酱
12-16 1万+
当在对象内的盒子使用了float后，导致对象本身不能被撑开自适应高度，这个是由于浮动产生原因。 如何解决父div对象自适应高度，方法有三种，接下来DIVCSS5逐一介绍。 1、首先我们先看HTML源代码： > html> head> meta charset="utf-8" /> title>父div不自适应高度实例title> style> .divcss5{ width:500px; b
子元素撑满父元素
JSON_J的博客
09-06 1303
子元素撑满父元素不生效问题
HTML撑起浮动子元素得父元素高度
weixin_30604651的博客
05-19 104
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
子元素无法撑开父元素的情况
weixin_38278892的博客
01-08 9100
如果父元素已经规定了度，不会高度塌陷，但可能会溢出（如果子元素总高度超过父元素的话）如果父元素没有规定高度： 2.1 如果所有子元素都浮动，父元素没有高度，这时候给父元素设置边框的话，就会发现边框保不住子元素 2.2 如果存在没有浮动的子元素，父元素高度取决于没有浮动的子元素，所以如果浮动子元素更高的话，还是会塌陷 解决浮动的办法： clear:both，不允许元素两侧有浮动（你可以理解
html最小宽度限制怎么写,纯CSS让子元素突破父元素的宽度限制
weixin_29130369的博客
05-31 486
在写样式中，我们可以经常看到这样的情况代码如下父元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素子元素如果你仔细思考过这个现象的话，why? 可能会问子元素不应该撑开父元素的宽度吗？就想撑开父元素的高度一样。why? 那么如何让这个子元素的父元素撑开这个宽度呢？这里提供两种解决方案。1. display: inline-bloc...
子div撑不开父div的几种解决方法
weixin_34309543的博客
10-28 513
为什么80%的码农都做不了架构师？>>> ...
解决子元素撑不开父元素
Caomeiguoguo的博客
09-08 1284
最近我正在做一个项目,做一个表格,遇到了一个问题 ，在我的谷歌上样式可以正常展示,在需求方的谷歌上样式挤压在了一起，我研究发现原来我的谷歌版本是83，而需求方的谷歌版本是65，这时候我才知道，所以我下载了65版本的谷歌，用于适配。 <body> <div class="container"> <div class="container_thead"> </div> <div class="container_tbody"&
【疑点】当子元素全部浮动时，怎么解决父元素塌陷的问题？
C84395836的博客
11-05 336
问题描述： 在我们让元素浮动的时候，它就会离开原来的文档流，将它原先占有的空间释放。 打个比方，父元素就如一个有伸缩性的容器，而子元素就如一个气球。当没有设置容器的高宽时，他的高宽完全是被装在里面的气球撑开的，当子元素浮动时候，就像气球从容器里飘了出来，飘在了他的上方。而此时容器也就空了，由于伸缩性，高度就变为了o，看不见了。 而我们想要父元素显示出来，正常得被子元素撑开，怎...
子元素div高度不确定时父div高度如何自适应
01-19
在最外层div加以下样式 height:100%; overflow:hidden;...我们可以通过三种方法来解决这个问题　1增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 复制代码代码如下: <div id=”m
子Div使用Float后撑开父Div的几种方法
09-25
子Div撑开父Div，可以设置父元素overflow以及zoom，或者是父元素也是设置浮动效果，也可以在添加一个子元素，并设置clear样式
子元素浮动时，如何使父类元素高度自适应
Farel的博客
08-22 545
前端子元素浮动时，如何使父类元素高度自适应
如何解决flex:1撑开父元素问题
天蚕土豆丝的博客
12-14 6666
开发过程中很多时候需要一个区域自动撑开，并且在刚好撑开的区域内实现滚动，这时用flex:1去做。但实际效果很多时候会出现区域撑的过大，却没有滚动效果。 要实现4自动撑满剩余空间，并且里面的内容超出时滚动。 容器1设置 display:flex;flex-direction:column;height:100%; 容器2设置 display:flex;flex-direction:column;flex:1;overflow:auto;这里overflow:auto不会有滚动效果，只是阻止容器2被撑大，不设置
关于居中、子元素撑开父元素
weixin_43294560的博客
01-16 4070
实现父div宽高由内部元素撑开: 父div添加属性:overflow:hidden; 子元素定位时，无法撑开父元素，因为此时子元素已脱离文本流 实现任意元素垂直水平居中方法(单个居中同理): position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 移动元素自身高宽的一半，因为定位时元素有自身高宽 垂直居中......
float&overflow-为啥div的高度无法被子元素撑开？
Cecilia_whf的博客
09-03 1693
1.普通的div（没有设置float属性的div）是可以被其中的元素撑开高度的 2.添加float属性为left或者right的div不能撑开普通父div，而且会遮盖之后的元素（比如下面被盖住部分边框的父div），如下示例 <div style="width: 500px;border: solid 1px red;"> <div style="fl...
解决高度塌陷--父元素未被子元素撑开问题，外边距重叠问题
前端如逆水行舟...
05-19 2266
文章目录 前言 一、解决办法是什么？ 二、某些方法不推荐的原因 1.某些方法不推荐的原因 2.什么是BFC? 总结 前言 什么是高度塌陷？ 高度塌陷是指当子元素设置浮动后，导致子元素脱离文档流，无法撑起父元素的高度，下方元素自动上移，造成页面布局混乱 其中a是父元素，b是子元素（且设置浮动） 一、解决办法 办法一：父元素同样设置浮动 例如：.a{float:left} 其中a为父元素----->不推荐，原因在下一个模块解释 办法二：为父元素...
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 826
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
css如何让父元素的高度由子元素撑开
05-25
可以使用以下两种方法让父元素的高度由子元素撑开： 1. 使用浮动（float）属性：将子元素设置为浮动，然后在父元素中添加一个clearfix类，清除浮动。这样父元素的高度就会被子元素撑开。 ```html .clearfix:...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

枫姿雾雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值