关键词：
【中文标题】添加内容后如何平滑div高度变化【英文标题】：How to smoothen div height change after adding content 【发布时间】：2019-01-16 23:28:04 【问题描述】：A 有一个带有 div 的轮播，每次幻灯片更改时都会调整其高度。然而，过渡并不顺利，边界只是跳进跳出。如何使用 css 或 jQuery 让它变得又好又流畅？我正在考虑使用 jQuery 的“盲”动画，但我不知道如何设置它。
添加“过渡：高度2s;”对 div 的 css 规则也不起作用。
.specs
height: 100vh;
background: url("https://images.unsplash.com/photo-1505663912202-ac22d4cb3707?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1a078798f813a2aba758a36f972fb0f6&auto=format&fit=crop&w=1500&q=80") no-repeat center center;
background-size: cover;
text-shadow: 1px 1px black;
.backgroundSpecs
padding-top: 7vh;
height: 100%;
width: 100vw;
background-color: rgba(57, 56, 56, 0.5);
display: flex;
align-items: center;
justify-content: center;
.fieldsetSpecs
height: auto;
width: 50vw;
border: 2px solid white;
padding: 5% 15% 5% 15%;
color: white;
text-align: center;
display: flex;
justify-content: center;
transition: height 2s;
.legendSpecs
color: white;
width: auto;
border: none;
margin: 0;
padding: 0 5vw 0 5vw;
/*karuzela specjalizacji*/
.specs #myCarousel2 .carousel-inner .active
height: 100%;
background: none;
.specs #myCarousel2
height: 100%;
.specs .carousel-inner
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.specs .carousel-indicators
top: -10%;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="specs" id="specs">
<div class="backgroundSpecs">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<fieldset class="fieldsetSpecs">
<legend class="legendSpecs">SPECJALIZACJE</legend>
<div id="myCarousel2" class="carousel slide" data-ride="carousel" data-interval="10000">
<!--CAROUSEL INDICATORS-->
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
<li data-target="#myCarousel2" data-slide-to="3"></li>
</ol>
<!--WRAPPER FOR SLIDES-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div>
<h4>Sprawy gospodarcze</h4>
<p>kompleksowa obsługa i doradztwo prawne osób fizycznych i prawnych, polskich i zagranicznych, sporządzenie i opiniowanie umów cywilnoprawnych w językach polskim i angielskim, procesy inwestycyjne, wykonanie i nienależyte wykonanie zobowiązań, egzekucja wierzytelności, due dilligence przedsiębiorstw, prawo nowych technologii, tworzenie i rejestracja spółek, wnioski do KRS, obsługa, fuzji, podziałów i przekształceń podmiotów gospodarczych oraz procesów likwidacji.</p>
</div>
</div>
<div class="item">
<div>
<h4>Sprawy z zakresu prawa pracy</h4>
<p>reprezentacja firm w postępowaniach sądowych z zakresu prawa pracy, doradztwo i reprezentacja pracowników w sporach z pracodawcami, nawiązanie stosunku pracy, wynagrodzenie za pracę i inne świadczenia pracownicze, przywrócenie do pracy, odszkodowanie za nieuzasadnione rozwiązanie umowy o pracę, mobbing, sporządzanie i opiniowanie regulaminów pracy, regulaminów wynagradzania oraz układów zbiorowych pracy, pomoc w rozwiązywaniu sporów zbiorowych ze związkami zawodowymi, odszkodowanie należne z tytułu wypadku przy pracy i choroby zawodowej</p>
</div>
</div>
<div class="item">
<div>
<h4>Sprawy z zakresu prawa nieruchomości i prawa administracyjnego</h4>
<p>obsługa transakcji sprzedaży, kupna, najmu nieruchomości, wykonywanie audytów prawnych nieruchomości (due dilligence), doradztwo w celu ograniczenia lub eliminacji ryzyk przy zakupie nieruchomości, obsługa transakcji nieruchomości, obsługa prawna wspólnot mieszkaniowych oraz członków wspólnot mieszkaniowych w sprawach dotyczących m.in. służebności, zniesienia współwłasności, eksmisji, robót budowlanych, reprezentowanie przed organami administracyjnymi, w tym przed organami nadzoru budowlanego, organami architektoniczno-budowalnymi w trakcie całego procesu budowlanego, reprezentacja w postępowaniach administracyjnych i sądowo-administracyjnych</p>
</div>
</div>
<div class="item">
<div>
<h4>Sprawy cywilne</h4>
<p>sprawy o zapłatę, wykonanie/niewykonanie/nienależyte wykonanie umów i zobowiązań , dochodzenie odszkodowań, zadośćuczynień (wypadki komunikacyjne, szkody osobowe, szkody majątkowe), sprawy dotyczące nieruchomości i praw rzeczowych (zasiedzenie, służebności, zniesienie współwłasności nieruchomości, wydanie nieruchomości, ochrona posiadania), spadki (stwierdzenia nabycia spadku, dział spadku, zachowek, testament, wydziedziczenie)</p>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="scripts.js"></script>
【问题讨论】：
【参考方案1】：当属性设置为自动时，CSS 高度过渡不起作用。您需要手动更改 fieldsetSpecs div 的高度才能使转换生效。幸运的是，这很容易做到，因为您可以监听slide.bs.carousel 事件并相应地更改元素的高度。将此添加到您的页面：
<script>
$('#myCarousel2').on('slide.bs.carousel', function (event)
$('.fieldsetSpecs').height($(event.relatedTarget).height());
)
</script>
你很高兴！
【讨论】：
解决方案效果很好，非常感谢！还有一件事：字段集现在可以完美地动画，但是在它滑动之后，文本会稍微超出字段集的内容，并且非常接近底部边框。我该如何解决这个问题，以使文本始终保持在字段集的最中心 - 就像加载页面时一样，在第一张幻灯片更改之前？ 只需在 Javascript 中的 fieldsetSpecs div 中增加一点高度。尝试从多 30 个像素左右开始。 好的，加了 30 就可以了。最后一个问题：我能做些什么来让这个旋转木马在 safari 上运行良好吗？我的朋友在 mac 上检查了它，每次幻灯片更改时，fieldset 的边界都会被吹到视口之外。我没有野生动物园，所以我很难检查出来 不幸的是，我也不使用 Safari，所以对此我无能为力。对不起！如何使用 javascript 获取动态变化的 div 的高度？ [复制]
...有没有办法使用javascript获取动态div的高度？我有一个由内容动态填充的动态div。我每次都想知道div的高度。谁能帮我弄清楚？【问题讨论】：你知道在哪 查看详情
如何使用 javascript 获取动态变化的 div 的高度？ [复制]
...有没有办法使用javascript获取动态div的高度？我有一个由内容动态填充的动态div。我每次都想知道div的高度。谁能帮我弄清楚？【问题讨论】：你知道在哪 查看详情
子高度变化时包装器 div 的过渡高度
...度的div。这会导致突然的高度变化。我希望高度变化能够平滑过渡，就像CSS3属性过渡一样。这是垃圾箱： 查看详情
基于内容动态变化高度的div的webkit-transition高度？
】基于内容动态变化高度的div的webkit-transition高度？【英文标题】：webkit-transitionheightforadivwithadynamicchangingheightbasedoncontent?【发布时间】：2011-09-2903:10:09【问题描述】：请看下面的jsFiddlehttp://jsfiddle.net/SgyEW/10/您可以单击显示不同... 查看详情
设置div最小高度以及高度自适应随着内容的变化而变化
<!--退租账单--><divid="bilsli"onmouseover="showBill(this)">#bilsli{position:absolute;right:-300px;top:0px;background:#fff;border:1pxsolidred;border-radius:5px;width:300px;height:auto;min-heigh 查看详情
如何使tinymce编辑器的高度随内容自变化（转载）
...辑器的高度随内容自变化 最简单的方法就是在配置时添加Autoresize插件：tinymce.init(selector:"textarea",//changethisvalueaccordingtoyourHTMLplugins:"autoresize");该插件有5个选项，可以设置最大高度、最小高度、距离底部的距离等：tinymce.init(..... 查看详情
html中用div代替textarea实现输入框高度随输入内容变化
项目中的需求:留言栏输入高度变化，超过1行时，自动伸展，超过4行后，不再伸展。主要思想是利用最小高度和最大高度，再加上overflow来实现，到了最大高度，文字不会溢出而是隐藏。根据文本框中字体的大小，高度需要适当... 查看详情
div随内容调整高度(父元素高度随子元素变化)
你就说我的头像是不是很酷，很有个性？ 嗯嗯，帅的不行了呢！你吃饭了吗？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？ .message{width:100%;padding-top:12px}.message.icon{position:relative;display:block;padding:0px;h... 查看详情
如何设置包装 div 的高度以防止响应式滑块/自动收录器后内容跳转？
...如何设置包装div的高度以防止响应式滑块/自动收录器后内容跳转？【英文标题】：Howtosettheheightofawrappingdivtopreventjumpsinthecontentafteraresponsiveslider/ticker?【发布时间】：2013-05-0609:06:27【问题描述】：我只用几行代码做了一个超级简... 查看详情
如何使子div与flex父高度相同
...我需要三个子div彼此高度相同，并且作为父div。一个div的内容被设置为在用户交互时发生变化，并且由此产生的任何高度变化都应该驱动父级或其他子级或两者的高度。我认为这可以通过flex实现。我已尝试实施针对相同问题的... 查看详情
如何在一定高度后显示滚动但高度不应该固定？
...scroll:auto;。我希望它在250像素后滚动，但应该根据其中的内容具有高度。例如，如果里面的内容是100px，那么div的高度应该是10 查看详情
两个div，父元素相对定位没有设置高度，子元素绝对定位高度随内容变化，此无法撑开父div
你这个是怎么解决的？？？参考技术A使用绝对定位，已经脱离了文档流，貌似要用JS。追问谢谢回答，已经好了 参考技术B撑不开一般要是没啥太大要求就定height了追问已经好了，http://wenda.tianya.cn/question/657292a2950d75da谢谢回答我... 查看详情
子div浮动（float）后父div高度自动失效解决方案
...父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。 2、如果父div定义height,子div均为标准流的时候，在IE下父div的height随内容变化而变化，如父div设置height:50px ... 查看详情
css如何怎么设置div边框颜色宽度和高度
...允许的。参考技术A1.首先，您需要创建一个div,对div进行添加一个class。我们利用CSS通过class来设置div的边框。2.创建一个用于设置边框的CSS文件，对于您实际开发中，将边框添加到您的CSS文件中即可。3.在CSS文件中设置DIV的边框，... 查看详情
如何使子高度相对于其父高度-Css
...现在我里面有一个子div，我想以这样一种方式设置该div的内容，即随着父div高度的变化，内容应该仍然在定义的规范内。例如：我希望：padding:40px 查看详情
如何设置 div 的高度匹配响应内容？
】如何设置div的高度匹配响应内容？【英文标题】：HowcanIsetadiv\'sheightmatchingtoresponsivecontent?【发布时间】：2013-03-2122:08:07【问题描述】：我尝试执行以下操作：单击时重新调整与div内容高度匹配的div高度（内容通过“overflow:hidden... 查看详情
当悬停在高度变化时，如何添加延迟？
】当悬停在高度变化时，如何添加延迟？【英文标题】：HowdoIaddadelaytothiswhenhoveringoverforheightchange?【发布时间】：2012-11-0802:01:55【问题描述】：$(function()$("#top-img").hover(function()$(this).stop().animate(height:"400px",queue:false,duration:700);,fun 查看详情
随着位置的变化平滑地为 div 设置动画
】随着位置的变化平滑地为div设置动画【英文标题】：Smoothlyanimateadivasitspositionchanges【发布时间】：2019-07-2403:37:47【问题描述】：我有一个绝对定位的div：classMyDivextendsReact.Componentstate=stepCount:0;componentDidMount()setInterval(()=>this.set... 查看详情