解决DIV高度自适应的有效方法

于 2023-10-04 07:10:24 发布
阅读量1.1k 收藏
点赞数
文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EipGemms/article/details/133540981
版权
前端 专栏收录该内容
284 篇文章 1 订阅 ¥59.90 ¥99.00
订阅专栏

在前端开发中，经常会遇到需要使DIV元素的高度自适应内容的情况。本文将介绍一些有效的方法来解决这个问题，并提供相应的源代码示例。

方法一：使用清除浮动

当DIV元素内部包含浮动元素时，其高度会塌陷，导致无法自适应内容的高度。为了解决这个问题，可以在DIV元素末尾添加一个具有清除浮动样式的空元素。

<div class="container">
  <div class="content"
了解本专栏 订阅专栏 解锁全文
EipGemms
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
订阅专栏
Firefox div高度自适应
12-09
1.如果div想要一个最小高度，那么应该用css的minheight这个属性，但是IE不支持，考虑到大多数用户都使用IE，所以一般情况下这个属性基本上弃置不用。在IE里面，height基本上就可以当作minheight来用，因为如果内容超出height，IE会自适应其高度。但是一旦设置了 height以后，FIrefox就不会自适应div的高度了。所以只能两个属性都不用，干干净净地写<div>Jimbor Studio</div>。 2.即使不设置固定高度，Firefox对高度的自适应也不那么尽人意。如果需要在一个层内嵌套一个需要float来规定的层，那它就又失灵了。其实有个最简单的方法，就是
html div自动高度,CSS技巧：3种常用方法解决div列高度自适应
weixin_31582099的博客
05-31 2456
本文向大家介绍一下解决div列高度自适的3种常用方法，分别是利用“clear:both”背景填充，使用脚本控制高度和margin负值父子容器高度继承三种。CSS技巧：解决div列高度自适的3种常用方法解决div列高度自适的方法有很多种，这里介绍三种最常用的方法给大家(下面所有例子以父main，子divleft、divright为例)。1、利用“clear:both”背景填充(推荐！！！)这是使用最...
三种有效解决DIV高度自适应的方法
iteye_4805的博客
11-17 1024
本文和大家重点讨论一下DIV高度自适应的三种有效解决方法，它们分别是一是JS法、二是背景图填充法、三是“补丁大法”（比较变态）。 DIV高度自适应的三种有效解决方法 DIV＋CSS设计俨然已成网页设计界的标准了。这种设计的好处大家都是知道的，但有些小问题确实很棘手，例如令人头痛的“DIV高度自适应”问题。 现在有三种解决DIV高度自适应行之有效的办法，一是JS法、二是背景图填充法、三是“...
Textarea根据内容自适应高度
09-04
使用JAVASCRIPT控制Textarea内容自适应高度，实施起来很简单，很平滑。
关于div自适应高度/左右高度自适应一致的js代码
10-27
在DIV和CSS进行网页布局中，DIV的自适应高度和自适应宽度是一个很常见的问题，本文将介绍左右自适应高度一致的Jquery与DIV高度自适应屏幕的js
Div父容器不根据内容自适应高度的解决
05-07
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。
DIV的高度自适应及注意问题（详细解释）(转)
weixin_30556959的博客
04-24 852
积累了一些经验，总结出一些关于div的高度自适应的技巧，希望有助于大家，转载请标明出处，谢谢。 转自:http://hi.baidu.com/atmo/blog/item/f0036edd6de364dc8d102985.html一、高度的自适应（父div高度随子div的高度改变而改变） 1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,...
实现div盒子的高度随页面内容增多而变化（自适应高度）效果
weixin_46353030的博客
07-20 1万+
一、功能需求： 给三个div盒子，实现对处于中间的div盒子隐藏多余内容。此时配置一个show按钮，当点击show按钮后将被隐藏的内容显示出来，并令后一个div盒子向下移动适当距离。保持三个div盒子的布局。 二、实现核心 方法在于max-height属性、overflow属性和display:inline-block属性 三、具体实现： 对中间的div设置一个max-height高度+overflow:hidden属性+display:inline-block属性； 用js获取show按钮和处于中间
HTML - 容器布局，使容器充满屏幕高度，自适应剩余高度
技术共享，共同进步！
03-21 5147
HTML - 容器布局，使容器充满屏幕高度，自适应剩余高度
设置DIV根据内容自动调整高度的三个方法
M_emery_的专栏
03-05 3179
Div即父容器在Firefox、Chrome、Safari中不会根据内容自动调节高度，我们看下面的HTML代码： divid="main">divid="content">div>div> 当Content内容很多时，即使main设置了高度100%或auto。在除IE外的其他浏览器中还是不能完好的自动伸展。也就是说，内容的高度容器main的高度还是没有自动撑开。 我们有三种方法可以
div或img图片高度随宽度自适应的方法
12-28
该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。 利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。 二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片上方垂直居中展示文字的，如果不需要可以选择最下方更简洁的代码） 行内元素垂直居中
里面的div怎么撑开外面的div让高度自适应
01-19
随着微软新操作系统的上市，ie6现在用的人越来越少了，但是XP系统看来是太过经典，仍然有相当多的用户在使用，且这部分人群中的大部分也没有单独升级浏览器的习惯，于是乎ie6依旧是使用最多的浏览器版本。根据本站流量的统计，来自ie6的访问比重为72.6%。表明了以上的观点，虽然最高的时候，ie6占了90%以上。 言归正传，div+css作为网页的布局已经是大势所趋。它的优点不在这里啰嗦。但最近经常有朋友提到关于容器高度自适应的兼容性问题。在这里简单作答。 1.有些时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应。
子元素div高度不确定时父div高度如何自适应
01-19
在最外层div加以下样式 height:100%; overflow:hidden; 其它方法： Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题　 1增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 复制代码代码如下: <div id=”m
DIV自动适应高度
09-13
DIV自动适应高度，设置三个DIV高度始终保持一致，不管其中哪个高度变化都会保持DIV向最高的看齐
JS实现DIV高度自适应窗口示例
12-09
本文实例讲述了JS实现DIV高度自适应窗口。分享给大家供大家参考，具体如下： <!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 runat="server"> <title></title> <style type="text/css"> *. { margin: 0
怎样让一个div高度自适应浏览器高度
09-22
怎样让一个div高度自适应浏览器高度在应用中很常见，感兴趣的朋友可以参考下哈，希望对你有所帮助
让div自动适应内容的高度
热门推荐
老高的博客
08-02 4万+
我们看下面的代码：　　当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。　　我们可以通过三种方法来解决这个问题。　　一，增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。 　　二，增加一个容器，在代码中存在，但在视觉中不可见。 　　三，增加一个BR并设置样式
[JS]div根据其中内容自适应宽度和高度
Gamin
12-02 9813
这里以自适应高度为例。先要设定好div的width，不用设置div的height属性。后面只需设置minHeight属性或者干脆minHeight属性也不去设置，再保证div是块级元素或绝对/固定位置的元素，这样div就会根据内容自适应高度了。除非有特殊需求否则还是建议自适应高度需要设置minHeight和maxHeight，因为无限制的自适应总会让人担心到时拿到的数据是否合乎规范。 minWidth 属性设置或返回元素的最小宽度，属性只在块级元素或绝对/固定位置的元素发挥作用。 le...
html文件前端页面 做样式自适应rem 代码
最新发布
04-28
可以使用以下代码实现基于 rem 的自适应布局： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rem 自适应布局示例</title> <style> /* 以下为基于 rem 的自适应布局代码 */ html { font-size: 62.5%; /* 1rem = 10px, 10px * 62.5% = 6.25px */ } body { font-size: 1.6rem; /* 1.6rem = 16px */ } .box { width: 6.4rem; /* 6.4rem = 64px */ height: 3.6rem; /* 3.6rem = 36px */ } </style> </head> <body> <div class="box">这是一个自适应的盒子</div> </body> </html> ``` 在上述代码中，我们通过设置 html 的 font-size 为 62.5%（即 1rem = 10px），然后通过设置 body 的 font-size 为 1.6rem（即 16px），就可以实现基于 rem 的自适应布局。在样式中，我们可以直接使用 rem 作为单位，比如设置宽度为 6.4rem（即 64px），高度为 3.6rem（即 36px），这样就可以实现自适应布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值