DIV高度随里边内容的增多而增高

最新推荐文章于 2021-06-21 10:36:24 发布
最新推荐文章于 2021-06-21 10:36:24 发布
阅读量2.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： DIV 高度自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangemails/article/details/46520047
该博客讨论了如何使用CSS使DIV的高度根据内部内容自动调整。通过展示一个包含多个浮动元素的示例，演示了如何创建一个可以随着内容增加而增高的容器。主要涉及到CSS的布局技巧和浮动元素的清除。

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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ceshidivHeight.WebForm1" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <style type="text/css">
        .wrap{width:776px;background:url(images/bullet.png)repeat-y 100%;}  
        .clear{clear:both;}  
    </style>
    <form id="form1" runat="server">
    <div>
        <div class="wrap">
            <div style="width:100px; height:100px;border:1px solid yellow; float:left;">


            </div>


             <div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">


            </div>
            <div style="width:100px; height:100px;border:1px solid yellow; float:left;">


            </div>


             <div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">


            </div>
            <div style="width:100px; height:100px;border:1px solid yellow; float:left;">


            </div>


             <div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">


            </div>
            <div style="width:100px; height:100px;border:1px solid yellow; float:left;">


            </div>


             <div style="width:100px; height:100px;border:1px solid yellow; float:left; margin-left:20px;">


            </div>
             <div style="width:100px; height:500px;border:1px solid yellow; float:left;margin-left:20px;">


            </div>
             <div style="width:100px; height:100px;border:1px solid yellow; float:left;margin-left:20px;">


            </div>
             <div class="clear">


            </div>
        </div>
    </div>
    </form>
</body>
</html>
div高度和宽度填充父容器
郭宝的博客
04-10 2816
方式一： 通过给html和body设置一个100%的高度来实现填充父容器 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style...
设置DIV最小高度以及高度自适应随着内容的变化而变化
01-19
在应用DIV布局时，有时会希望DIV的高度会随着内容的变化而变化，但是又想设置DIV的一个最小高度，特别是当DIV有背景色或背景图片时最小高度的设置会使视觉效果更好。可以通过如下属性的设置达到效果： 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>设置div最小高度及高度自动伸展的实例</title> <style> .divHeight{height:400px;h
div 初始高度，并随内容高度变化。
老李 技术 专栏
05-13 6696
前几天做个邮箱系统，其中在内容的div设置了高度为200px;可是在内容大于200高度后就出现了内容的溢出。如图：查完资料够才知道css有个min-height;设置div的初始化高度，设置属性就适应内容的高度。 如图：ok了。
div高度随着数据的增加而增加
weixin_43439494的博客
08-09 692
overflow:auto
div高度根据内容自动增大
weixin_30448685的博客
10-19 916
1、很多时候我们希望容器高度能够自适应内部元素的变化，需要用到min-height属性。 2、有时候用了min-height还是不会随着内容自适应高度，您需要检查下容器的子元素是不是有浮动属性，当子元素有浮动时，父元素高度是不会自适应变化的。 3、解决方法如下： 在浮动的容器后面，父容器结束之前加入一个div <div class="fuqin"><ul>&l...
web前端-HTML-Iframe框架
jinchenpeng的博客
05-26 328
注意：既能调整大小，又能同行显示。行内块级元素。 例如 再例如： 再例如： menu.html index.html 效果如下 点击学校概况右边切换页面
解决Div父容器无法根据内容自适应高度的问题
在这个例子中，`content`是`main`的子元素，如果`content`的内容增多，`main`容器却不能自动调整其高度。这可能是因为CSS中的高度计算规则导致的，特别是涉及到百分比高度和浮动元素时。 针对这种情况，有几种常见...
JQuery+CSS实现头部Div固定在指定位置，随鼠标上下滑动而不变化
WhenTheWindBlows的博客
02-03 3526
头部固定，随鼠标的滑动而位置保持不变【举例：一般电商网站，未登录时，头部登录栏随着鼠标向下滑动，一直位于头部】 css *{ margin:0px; padding:0px; } .main{ width:100%; height:600px; background-color:red; } .content{ width:1000px; height:2300px; back...
前端实例知识点-多个并行的DIV实现高度一致
热门推荐
ccsawcc的博客
01-11 1万+
博客前言： 做为一个程序员，在复杂的工作环境中总要学着去承担更多的责任，和接触更广泛的知识。然而在接触新区域时，一个小白总是为自己能钻研出一点点东西感到十分兴奋，为了让这份成就感附属的知识点留给自己，决定记录下来这些小知识点（敲黑板，期末要要考...）。可以方便以后查阅，还有可能分享给遇到同样问题的同学们。 前端知识点（一）：多个并行的DIV实现高度一致 我的前端启蒙来源于工作初期的
div中img图片下方空白问题，div高度不等于img图片的高度，会留出几个像素
love2016hy的博客
11-08 4018
在div中加入img图片时会发现div的高度并不等于img图片的高度，借用一下小米的logo做了一下测试，代码简单明了，请继续往下看： html> div class="wrap"> img src="https://m.mi.com//component/header/img/logo_121d4a6.png" alt="logo"> div> br>
DIV高度固定 当内容超出固定值 DIV自动适应高度
创世宇图 宏图天下
07-13 3440
当浏览器是IE６时　DIV高度固定 当内容超出固定值 DIV会自动适应高度但是当我们用IE7、8或者其他主流浏览器时 会发现DIV高度就不那么听话了 ，内容会超出 DIV显示在外面　　大大影响视觉效果。所以使用一下代码可以很好的解决我们遇到的问题我们将DIV的最小高度设置为200
html用div设置长高,html – 使用div设置图像,其子设置高度
weixin_39765625的博客
06-21 306
Live Demo>经过IE7 / IE8和最新版本的测试：Firefox,Chrome,Safari,Opera.>图像的高度完全取决于ul的高度.>为IE7提供所需的额外规则高度：100％,我使用的是Star hack.如果您需要100％有效的CSS,可以使用conditional comments或Star plus hack.CSS：#iContainer {backgr...
随着文字内容增加，div的高度也跟着增加，并且文字自动换行
hhw199112的博客
11-28 5632
Test             body         {              margin:0px;              border:solid 1px red;         }         div         {             margin:0 auto;             border:solid 1px red;    
div高度比包含的img元素高出3px的问题
weixin_34363171的博客
06-12 288
问题描述 写css的时候遇到了一个小问题div只包含一个img元素，但是页面展示上div却比img高出一点。当时只觉得匪夷所思...找了半天自己样式的问题...情况如下图 <!-- html部分 --> <div class="header-pic"> <img c...
div 随内容的增加高度自动变化（变高）
weixin_34113237的博客
08-23 1529
只需要在div中设置 position:relative; 转载于:https://www.cnblogs.com/blosaa/archive/2011/08/23/2150134.html
DIV高度自动延长
我爱逛菜园
02-10 2335
div标签如下 clear"> css样式设置如下 #box { margin:0  auto; float:left;} #left,#right { width:300px height:100px;float:left;}} .clear{height:0;clear:both;line-height:0;font-size:0;
DIV的高度自适应及注意问题（详细解释）(转)
weixin_30556959的博客
04-24 1015
积累了一些经验，总结出一些关于div的高度自适应的技巧，希望有助于大家，转载请标明出处，谢谢。 转自:http://hi.baidu.com/atmo/blog/item/f0036edd6de364dc8d102985.html一、高度的自适应（父div高度随子div的高度改变而改变） 1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,...
解决 div或者a标签的高度比里面的img高度高问题
p_qmwycbf的博客
10-22 5331
描述  设置div  宽高100% a 标签 inline-block 宽高100% img固定宽高 此时img和a标签之间存在一个高度 不能消除 原因： a元素或者div元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，
DIV自动适应内部元素的高度
weixin_30879833的博客
06-18 623
如果一个容器内的元素都浮动的话，那么它的高度将不会去适应内部元素的高度。解决办法是在父DIV标签增加 overflow:auto; zoom:1;，这样就可以让它自动适应内部元素的高度了。 转载于:https://www.cnblogs.com/robt/p/4587334.html...
``` <div class="chat-right-content w100 h100"> <div class="chat-right-content-list w100" @scroll="handleScroll"> </div> <!-- 底部输入框 --> <div class="chat-input w100"> <div class="chat-input-warp w100" > <!-- <textarea @submit.prevent="getQuestion(1)" class="chat-input-box" :placeholder="T.placeholder" v-html="mdRender(contentVal)" v-model="contentVal" :disabled="isProcessing"></textarea> --> <div @keydown.enter.prevent="handleEnter" class="chat-input-box" contenteditable="true" ref="contentEditable" :placeholder="contentVal ? '' : placeholder" enterkeyhint="send" v-contenteditable="contentVal" @input="onInput" :disabled="isProcessing" tabindex="0" autocomplete="off" spellcheck="false" ></div> <div class="chat-input-btn-warp flex justify-content-between align-items-center"> <!-- 提交 --> <tooltip-components :key="tipKey" :content="isProcessing ? T.talkPadding : (contentVal? '' : T.inputTip)"> <el-button :disabled="isProcessing || !contentVal" size="small" type="primary" :icon="isProcessing ? 'el-icon-loading' : 'el-icon-top'" circle style="font-size: 15px; margin-left: 5px; font-weight: 900" @click="getQuestion(1)" ></el-button> </tooltip-components> </div> </div> </div> </div>2```代码其他逻辑都不要管 只加一个chat-input-box输入框输入内容过多 chat-input自动加高 是向上1加高度 设定一个最高 超过最高不在加高 内容过多加高时需要动态减掉chat-right-content-list对应的高度 contentVal如果没值了 chat-input和chat-input-box，chat-right-content-list就恢复原来高度
最新发布
03-08
<think>好的，我需要解决用户的问题，即如何让输入框在内容过多时自动调整高度，同时调整聊天内容区域的高度，并且在内容清空时恢复原状。首先，我得理解用户提供的代码结构。 用户给出的代码结构中有三个主要部分：`chat-right-content-list`（聊天内容列表）、`chat-input`（底部输入框容器）和`chat-input-box`（可编辑的输入框）。用户的需求是当输入框内容增多时，`chat-input`向上增加高度，但有一个最大高度限制。同时，内容区域`chat-right-content-list`的高度需要相应减少，以保持整体布局不变。当内容被清空时，所有元素恢复原始高度。 首先，我需要考虑如何检测输入框内容的变化。由于用户使用的是`contenteditable`的div，可以通过监听input事件来触发高度调整。接下来，调整输入框的高度。这里可能需要使用JavaScript动态计算内容的高度，然后设置`chat-input-box`和`chat-input`的高度，同时确保不超过设定的最大值。 然后，调整聊天内容区域的高度。因为`chat-right-content-list`和`chat-input`是上下布局，当输入框高度增加时，内容区域的高度应减少相同的量。这可以通过计算两者的高度差来实现，可能需要使用CSS的flex布局或者动态设置高度。 另外，需要考虑在内容被清空时，将所有元素的高度重置回初始值。这可以在检测到`contentVal`为空时触发恢复逻辑。 可能遇到的问题包括：如何准确计算内容的高度，特别是在换行和文本溢出时；如何确保内容区域和输入框的高度调整平滑，不影响用户体验；以及如何处理浏览器兼容性问题。 解决方案的大致步骤可能是： 1. 使用`input`事件监听输入框内容变化。 2. 在事件处理函数中，获取输入框的滚动高度，动态调整其高度，同时限制最大高度。 3. 根据输入框的高度变化，调整`chat-input`容器的高度。 4. 计算内容区域`chat-right-content-list`的新高度，使其总高度保持不变。 5. 当内容清空时，将所有相关元素的高度重置为初始值。 还需要注意CSS的样式设置，比如`chat-right-content-list`可能需要设置`overflow-y: auto`以允许滚动，而容器使用flex布局来动态调整子元素的大小。 最后，测试不同情况，如大量文本输入、删除内容、达到最大高度后的滚动等，确保功能稳定。</think>要实现这个输入框高度自适应效果，建议通过以下步骤实现： 1. 添加样式设置： ```css .chat-right-content { display: flex; flex-direction: column; height: 100%; } .chat-right-content-list { flex: 1; overflow-y: auto; transition: height 0.3s ease; } .chat-input { min-height: 60px; /* 初始高度 */ max-height: 200px; /* 最大高度 */ transition: all 0.3s ease; } .chat-input-box { max-height: 140px; /* 根据最大容器高度计算 */ overflow-y: auto; } ``` 2. 在Vue中添加方法： ```javascript data() { return { originalListHeight: 0, isResizing: false } }, mounted() { this.originalListHeight = document.querySelector('.chat-right-content-list').offsetHeight; }, methods: { adjustHeights() { const inputBox = this.$refs.contentEditable; const chatInput = document.querySelector('.chat-input'); const list = document.querySelector('.chat-right-content-list'); // 计算需要增加的高度 const scrollHeight = inputBox.scrollHeight; const newHeight = Math.min(scrollHeight, 200); // 限制最大高度 // 调整输入框容器高度 chatInput.style.height = `${newHeight}px`; // 调整内容区域高度 const heightDiff = newHeight - 60; // 60是初始高度 list.style.height = `${this.originalListHeight - heightDiff}px`; // 自动滚动到底部 this.$nextTick(() => { inputBox.scrollTop = inputBox.scrollHeight; }); }, resetHeights() { const chatInput = document.querySelector('.chat-input'); const list = document.querySelector('.chat-right-content-list'); chatInput.style.height = '60px'; list.style.height = `${this.originalListHeight}px`; }, onInput(event) { this.contentVal = event.target.innerHTML; if (!this.contentVal) { this.resetHeights(); return; } this.adjustHeights(); } } ``` 3. 添加监听器（在mounted中）： ```javascript mounted() { this.originalListHeight = document.querySelector('.chat-right-content-list').offsetHeight; this.$refs.contentEditable.addEventListener('input', this.adjustHeights); }, beforeDestroy() { this.$refs.contentEditable.removeEventListener('input', this.adjustHeights); } ``` 实现原理： 1. 使用flex布局保持整体容器高度 2. 通过监听输入框的scrollHeight动态调整高度 3. 内容区域高度通过计算差值动态调整 4. 设置最大高度限制防止无限增高 5. 内容清空时恢复初始高度 6. 添加过渡动画提升体验 注意事项： 1. 最大高度值需要根据实际UI设计调整 2. 移动端需要额外处理虚拟键盘问题 3. 带格式内容（如图片）需要额外处理 4. 建议添加防抖优化性能 5. 需要处理复制粘贴长内容的情况
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值