css - 高さを移行するにはどうすればよいですか: 0; 高さ: 自動; CSSを使用していますか？

Question

<ul>CSSトランジションを使用してスライドダウンを作成しようとしています。

は<ul>から始まりますheight: 0;。ホバーすると、高さが に設定されheight:auto;ます。ただし、これにより、遷移ではなく、単に表示されます。

からheight: 40px;まで行うと、height: auto;までスライドしheight: 0;、突然正しい高さまでジャンプします。

JavaScript を使用せずにこれを行うにはどうすればよいでしょうか?

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent40:hover #child40 {
  height: auto;
}
h1 {
  font-weight: bold;
}

The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
<hr>
<div id="parent0">
  <h1>Hover me (height: 0)</h1>
  <div id="child0">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>
<hr>
<div id="parent40">
  <h1>Hover me (height: 40)</h1>
  <div id="child40">Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>Some content
    <br>
  </div>
</div>

Answer 1

max-heightトランジションで使用し、 ではありませんheight。max-heightそして、あなたの箱がこれまでに得るよりも大きなものに値を設定してください.

こちらの別の回答で、Chris Jordan が提供するJSFiddle デモを参照してください。

#menu #list {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}

#menu:hover #list {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Answer 2

代わりに scaleY を使用する必要があります。

ul {
  background-color: #eee;
  transform: scaleY(0);    
  transform-origin: top;
  transition: transform 0.26s ease;
}
p:hover ~ ul {
  transform: scaleY(1);
}

<p>Hover This</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

jsfiddle で上記のコードのベンダー プレフィックス付きバージョンを作成し、高さの代わりに scaleY を使用するように jsfiddle を変更しました。

編集scaleYコンテンツの変換 方法が気に入らない人もいそれが問題である場合は、clip代わりに使用することをお勧めします。

ul {
  clip: rect(auto, auto, 0, auto);
  position: absolute;
  margin: -1rem 0;
  padding: .5rem;

  color: white;

  background-color: rgba(0, 0, 0, 0.8);

  transition-property: clip;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
h3:hover ~ ul,
h3:active ~ ul,
ul:hover {
  clip: rect(auto, auto, 10rem, auto);
}

<h3>Hover here</h3>
<ul>
  <li>This list</li>
  <li>is clipped.</li>
  <li>A clip transition</li>
  <li>will show it</li>
</ul>
<p>
  Some text...
</p>

Answer 3

関係する高さの1つがである場合、現在高さをアニメーション化することはできませんauto。2つの明示的な高さを設定する必要があります。

Answer 4

私が常に使用してきた解決策は、最初にフェードアウトしてからfont-size、paddingとのmargin値を縮小することでした。ワイプと同じようには見えませんが、静的heightまたはmax-height.

作業例:

/* final display */
#menu #list {
    margin: .5em 1em;
    padding: 1em;
}

/* hide */
#menu:not(:hover) #list {
    font-size: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    /* fade out, then shrink */
    transition: opacity .25s,
                font-size .5s .25s,
                margin .5s .25s,
                padding .5s .25s;
}

/* reveal */
#menu:hover #list {
    /* unshrink, then fade in */
    transition: font-size .25s,
                margin .25s,
                padding .25s,
                opacity .5s .25s;
}

<div id="menu">
    <b>hover me</b>
    <ul id="list">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

<p>Another paragraph...</p>

Answer 5

少しの非セマンティックなジゲリーポケリーでできます。私の通常のアプローチは、コンテンツの高さを測定するためだけに使用されるスタイルのないDIVである単一の子を持つ外側のDIVの高さをアニメーション化することです。

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv.style.height = wrapper.clientHeight + "px";
  }
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}

<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div class='measuringWrapper'>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
    <div>
      The contents of my div.
    </div>
  </div>
</div>

を省略して.measuringWrapper、DIVの高さをautoに設定し、それをアニメーション化したいのですが、それは機能していないようです（高さは設定されますが、アニメーションは発生しません）。

function growDiv() {
  var growDiv = document.getElementById('grow');
  if (growDiv.clientHeight) {
    growDiv.style.height = 0;
  } else {
    growDiv.style.height = 'auto';
  }
}

#grow {
  -moz-transition: height .5s;
  -ms-transition: height .5s;
  -o-transition: height .5s;
  -webkit-transition: height .5s;
  transition: height .5s;
  height: 0;
  overflow: hidden;
  outline: 1px solid red;
}

<input type="button" onclick="growDiv()" value="grow">
<div id='grow'>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
  <div>
    The contents of my div.
  </div>
</div>

私の解釈では、アニメーションを実行するには明示的な高さが必要です。高さ（開始または終了の高さ）が。の場合、高さに関するアニメーションを取得することはできませんauto。

Answer 6

CSS3 トランジションを使用して高さをアニメーション化する視覚的な回避策は、代わりにパディングをアニメーション化することです。

完全なワイプ効果は得られませんが、transition-duration と padding の値をいじってみると、十分に近くなるはずです。高さ/最大高さを明示的に設定したくない場合は、これが探しているものです。

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/ (上記の jsFiddle の stephband から引用)

Answer 7

max-height私の回避策は、スムーズなアニメーションのために正確なコンテンツの高さに移行してから、transitionEndコールバックを使用してに設定max-heightし9999px、コンテンツのサイズを自由に変更できるようにすることです。

var content = $('#content');
content.inner = $('#content .inner'); // inner div needed to get size of content when closed

// css transition callback
content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
});

$('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){  
        
        content.contentHeight += content.inner.outerHeight(); // if closed, add inner height to content height
        content.css({
            'max-height': content.contentHeight,
            'opacity': 1
        });
        
    }
});

.transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}

body {
    font-family:Arial;
    line-height: 3ex;
}
code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
}
#toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
}
#content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
}
#content .inner {
    padding:10px;
    overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="content" class="open">
    <div class="inner">
        <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>
    </div>
</div>

<br />

<button id="toggle">Challenge Accepted!</button>

Answer 8

ハードコーディングされた値はありません。

JavaScript はありません。

近似なし。

秘訣は、div100% の意味をブラウザーに理解させるために、隠し & 複製を使用することです。

この方法は、アニメーション化する要素の DOM を複製できる場合に適しています。

.outer {
  border: dashed red 1px;
  position: relative;
}

.dummy {
  visibility: hidden;
}

.real {
  position: absolute;
  background: yellow;
  height: 0;
  transition: height 0.5s;
  overflow: hidden;
}

.outer:hover>.real {
  height: 100%;
}

Hover over the box below:
<div class="outer">
  <!-- The actual element that you'd like to animate -->
  <div class="real">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
  <!-- An exact copy of the element you'd like to animate. -->
  <div class="dummy" aria-hidden="true">
unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable content unpredictable
content unpredictable content unpredictable content unpredictable content
  </div>
</div>

Answer 9

これを投稿すると、すでに30を超える回答がありますが、私の回答は、ジェイクによってすでに受け入れられている回答よりも改善されていると感じています.

max-height多くのコメンターが指摘したようmax-heightに、実際の高さに非常に近い値を設定する必要があるため、CSS3トランジションを単に使用することから生じる問題に満足していませんでした。そうしないと、遅延が発生します. その問題の例については、このJSFiddleを参照してください。

これを回避するために (まだ JavaScript を使用していません)、transform: translateYCSS 値を遷移させる別の HTML 要素を追加しました。

これは、max-heightとの両方translateYが使用されることを意味max-heightします。要素がその下の要素を押し下げることを許可し、必要なtranslateY「即時」効果を与えます。の問題はmax-height依然として存在しますが、その影響は軽減されます。これは、値に対してはるかに大きな高さを設定し、それmax-heightについて心配することが少なくなることを意味します。

全体的な利点は、元に戻る遷移 (折りたたみ) で、ユーザーはtranslateYすぐにアニメーションを見ることができるため、所要時間はそれほど重要ではありませんmax-height。

フィドルとしての解決策

body {
  font-family: sans-serif;
}

.toggle {
  position: relative;
  border: 2px solid #333;
  border-radius: 3px;
  margin: 5px;
  width: 200px;
}

.toggle-header {
  margin: 0;
  padding: 10px;
  background-color: #333;
  color: white;
  text-align: center;
  cursor: pointer;
}

.toggle-height {
  background-color: tomato;
  overflow: hidden;
  transition: max-height .6s ease;
  max-height: 0;
}

.toggle:hover .toggle-height {
  max-height: 1000px;
}

.toggle-transform {
  padding: 5px;
  color: white;
  transition: transform .4s ease;
  transform: translateY(-100%);
}

.toggle:hover .toggle-transform {
  transform: translateY(0);
}

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

<div class="toggle">
  <div class="toggle-header">
    Toggle!
  </div>
  <div class="toggle-height">
    <div class="toggle-transform">
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
      <p>Content!</p>
    </div>
  </div>
</div>

Answer 10

編集：更新された回答を下にスクロールし
て、ドロップダウンリストを作成していて、この投稿を見ました...さまざまな回答がありましたが、ドロップダウンリストも共有することにしました...完璧ではありませんが、少なくともcssのみを使用します落ちる！リストをビューに変換するために transform:translateY(y) を使用してきました... テスト
で詳細を確認できます
http://jsfiddle.net/BVEpc/4/
ドロップダウンリストは上から来ており、それらを適切に表示するにはこれが必要でした.私のdivコードは次のとおりです:

#menu div {
    transition: 0.5s 1s;
    z-index:-1;
    -webkit-transform:translateY(-100%);
    -webkit-transform-origin: top;
}

ホバーは次のとおりです。

#menu > li:hover div {
    transition: 0.5s;
    -webkit-transform:translateY(0);
}

ul の高さはコンテンツに設定されているため、本文のコンテンツを超えることができるため、ul に対してこれを行いました。

 #menu ul {
    transition: 0s 1.5s;
    visibility:hidden;
    overflow:hidden;
}

そしてホバー：

#menu > li:hover ul {
     transition:none;
     visibility:visible;
}

遷移後の 2 回目は遅延であり、ドロップダウン リストがアニメーションで閉じられた後に非表示になります ...
後で誰かがこれを利用できることを願っています。

編集: このプロトタイプを実際に使用している人々が信じられません! このドロップダウン メニューは 1 つのサブ メニューのみであり、それだけです。IE 8 をサポートして、ltr と rtl の両方の方向に 2 つのサブメニューを持つことができる、より良いものを更新しました。
LTR の
Fiddle RTL
の Fiddle うまくいけば、将来誰かがこれを役に立つと思うでしょう。

Answer 11

min-height と max-height も指定すれば、height:0 から height:auto に移行できます。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

Answer 12

@jake's answer を拡張すると、トランジションは最大の高さの値まで進み、アニメーションが非常に高速になります. :hover と off の両方のトランジションを設定すると、クレイジーな速度をもう少し制御できます.

したがって、li:hover はマウスが状態に入ったときであり、ホバーされていないプロパティの遷移はマウスを離すことになります。

うまくいけば、これはいくつかの助けになるでしょう。

例えば：

.sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

ここにフィドルがあります：http://jsfiddle.net/BukwJ/

Answer 13

このソリューションでは、いくつかの手法を使用します。

• padding-bottom:100%パーセンテージが要素の現在の幅に関して定義される「ハック」。このテクニックの詳細。
• フロート シュリンク ラッピング (フロート クリア ハックを適用するには追加の div が必要)
• https://caniuse.com/#feat=css-writing-modeの非セマンティックな使用と、それを元に戻すためのいくつかの変換 (これにより、上記の垂直コンテキストでのパディング ハックの使用が可能になります)

ただし、最終的には、CSS のみを使用してパフォーマンスの高いトランジションを取得し、1 つのトランジション関数でスムーズにトランジションを実現できます。聖杯！

もちろんデメリットも！コンテンツが切り取られる幅を制御する方法がわかりません ( overflow:hidden)。padding-bottom ハックのため、幅と高さは密接に関連しています。方法はあるかもしれませんが、それを元に戻します。

https://jsfiddle.net/EoghanM/n1rp3zb4/28/

body {
  padding: 1em;
}

.trigger {
  font-weight: bold;
}

/* .expander is there for float clearing purposes only */
.expander::after {
  content: '';
  display: table;
  clear: both;
}

.outer {
  float: left; /* purpose: shrink to fit content */
  border: 1px solid green;
  overflow: hidden;
}

.inner {
  transition: padding-bottom 0.3s ease-in-out;  /* or whatever crazy transition function you can come up with! */
  padding-bottom: 0%;  /* percentage padding is defined in terms of width. The width at this level is equal to the height of the content */
  height: 0;

  /* unfortunately, change of writing mode has other bad effects like orientation of cursor */
  writing-mode: vertical-rl;
  cursor: default; /* don't want the vertical-text (sideways I-beam) */
  transform: rotate(-90deg) translateX(-100%);  /* undo writing mode */
  transform-origin: 0 0;
  margin: 0;  /* left/right margins here will add to height */
}

.inner > div { white-space: nowrap; }

.expander:hover .inner,  /* to keep open when expanded */
.trigger:hover+.expander .inner {
  padding-bottom: 100%;
}

<div class="trigger">HoverMe</div>
<div class="expander">
  <div class="outer">
    <div class="inner">
      <div>First Item</div>
      <div>Content</div>
      <div>Content</div>
      <div>Content</div>
      <div>Long Content can't be wider than outer height unfortunately</div>
      <div>Last Item</div>
    </div>
  </div>
</div>
<div>
  after content</div>
</div>

Answer 14

私は最近、ラッピングではなく要素を移行しmax-heightています。liul

その理由は、 small の遅延はlargeに比べmax-heightsて (たとえあったとしても) はるかに目立たないからです。max-heightsmax-heightfont-sizeliemsrems

私の1remフォントサイズmax-heightが 3remここで例を見ることができます：

http://codepen.io/mindfullsilence/pen/DtzjE

Answer 15

私はこれを行うことができました。私は.child＆.parentdivを持っています。子 div は、親の幅/高さの位置に完全に収まりますabsolute。translate次に、プロパティをアニメーション化してY値を押し下げ100%ます。その非常にスムーズなアニメーション、ここでの他のソリューションのような不具合やマイナス面はありません.

このようなもの、疑似コード

.parent{ position:relative; overflow:hidden; } 
/** shown state */
.child {
  position:absolute;top:0;:left:0;right:0;bottom:0;
  height: 100%;
  transition: transform @overlay-animation-duration ease-in-out;
  .translate(0, 0);
}

/** Animate to hidden by sliding down: */
.child.slidedown {
  .translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}

heighton .parent、 in px、%、または leave asを指定しますauto。.childこの div は、スライド ダウンするときにdiv をマスクします。

Answer 16

Answer 17

最大高さをアニメーション化するためのジェイクの答えは素晴らしいですが、大きな最大高さを設定することによって引き起こされる遅延が面倒であることがわかりました。

折りたたみ可能なコンテンツを内側の div に移動し、内側の div の高さを取得して最大の高さを計算することができます (JQuery を介して、outerHeight() になります)。

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

ここに jsfiddle リンクがあります: http://jsfiddle.net/pbatey/duZpT

これは、必要な最小限のコードを含む jsfiddle です: http://jsfiddle.net/8ncjjxh8/

Answer 18

line-height、padding、opacityおよびを使用した CSS のみの代替ソリューションmargin:

body {
  background-color: linen;
}

main {
  background-color: white;
}

[id^="toggle_"] ~ .content {
  line-height: 0;
  opacity: 0;
  padding: 0 .5rem;
  transition: .2s ease-out;
}

[id^="toggle_"] ~ .content > p {
  margin: 0;
    transition: .2s ease-out;
}

[id^="toggle_"]:checked ~ .content   {
  opacity: 1;
  padding: .5rem;
  line-height: 1.5;
}

[id^="toggle_"]:checked ~ .content p  {
    margin-bottom: .75rem;
}

[id^="toggle_"] + label {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 1em;
  background: lightsteelblue;
  border-bottom: 1px solid gray;
  cursor: pointer;
}

[id^="toggle_"] + label:before {
  content: "Show";
}

[id^="toggle_"]:checked + label:before {
  content: "Hide";
}

[id^="toggle_"] + label:after {
  content: "\25BC";
}

[id^="toggle_"]:checked + label:after {
  content: "\25B2";
}

<main>
    <div>
        <input type="checkbox" id="toggle_1" hidden>
        <label for="toggle_1" hidden></label>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor neque, commodo quis leo ut, auctor tincidunt mauris. Nunc fringilla tincidunt metus, non gravida lorem condimentum non. Duis ornare purus nisl, at porta arcu eleifend eget. Integer lorem ante, porta vulputate dui ut, blandit tempor tellus. Proin facilisis bibendum diam, sit amet rutrum est feugiat ut. Mauris rhoncus convallis arcu in condimentum. Donec volutpat dui eu mollis vulputate. Nunc commodo lobortis nunc at ultrices. Suspendisse in lobortis diam. Suspendisse eget vestibulum ex.
            </p>
        </div>
    </div>
    <div>
        <input type="checkbox" id="toggle_2" hidden>
        <label for="toggle_2" hidden></label>
        <div class="content">
            <p>
                Maecenas laoreet nunc sit amet nulla ultrices auctor. Vivamus sed nisi vitae nibh condimentum pulvinar eu vel lorem. Sed pretium viverra eros ut facilisis. In ut fringilla magna. Sed a tempor libero. Donec sapien libero, lacinia sed aliquet ut, imperdiet finibus tellus. Nunc tellus lectus, rhoncus in posuere quis, tempus sit amet enim. Morbi et erat ac velit fringilla dignissim. Donec commodo, est id accumsan cursus, diam dui hendrerit nisi, vel hendrerit purus dolor ut risus. Phasellus mattis egestas ipsum sed ullamcorper. In diam ligula, rhoncus vel enim et, imperdiet porta justo. Curabitur vulputate hendrerit nisl, et ultricies diam. Maecenas ac leo a diam cursus ornare nec eu quam.
            </p>
            <p>Sed non vulputate purus, sed consectetur odio. Sed non nibh fringilla, imperdiet odio nec, efficitur ex. Suspendisse ut dignissim enim. Maecenas felis augue, tempor sit amet sem fringilla, accumsan fringilla nibh. Quisque posuere lacus tortor, quis malesuada magna elementum a. Nullam id purus in ante molestie tincidunt. Morbi luctus orci eu egestas dignissim. Sed tincidunt, libero quis scelerisque bibendum, ligula nisi gravida libero, id lacinia nulla leo in elit.
            </p>
            <p>Aenean aliquam risus id consectetur sagittis. Aliquam aliquam nisl eu augue accumsan, vel maximus lorem viverra. Aliquam ipsum dolor, tempor et justo ac, fermentum mattis dui. Etiam at posuere ligula. Vestibulum tortor metus, viverra vitae mi non, laoreet iaculis purus. Praesent vel semper nibh. Curabitur a congue lacus. In et pellentesque lorem. Morbi posuere felis non diam vulputate, non vulputate ex vehicula. Vivamus ultricies, massa id sagittis consequat, sem mauris tincidunt nunc, eu vehicula augue quam ut mauris.
            </p>
        </div>
    </div>
        <div>
        <input type="checkbox" id="toggle_3" hidden>
        <label for="toggle_3" hidden></label>
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dolor neque, commodo quis leo ut, auctor tincidunt mauris. Nunc fringilla tincidunt metus, non gravida lorem condimentum non. Duis ornare purus nisl, at porta arcu eleifend eget. Integer lorem ante, porta vulputate dui ut, blandit tempor tellus. Proin facilisis bibendum diam, sit amet rutrum est feugiat ut. Mauris rhoncus convallis arcu in condimentum. Donec volutpat dui eu mollis vulputate. Nunc commodo lobortis nunc at ultrices. Suspendisse in lobortis diam. Suspendisse eget vestibulum ex.
            </p>
            <p>Sed non vulputate purus, sed consectetur odio. Sed non nibh fringilla, imperdiet odio nec, efficitur ex. Suspendisse ut dignissim enim. Maecenas felis augue, tempor sit amet sem fringilla, accumsan fringilla nibh. Quisque posuere lacus tortor, quis malesuada magna elementum a. Nullam id purus in ante molestie tincidunt. Morbi luctus orci eu egestas dignissim. Sed tincidunt, libero quis scelerisque bibendum, ligula nisi gravida libero, id lacinia nulla leo in elit.
            </p>
        </div>
    </div>
</main>

Answer 19

このスレッドが古くなっていることは承知していますが、特定の Google 検索で上位にランクされるため、更新する価値があると考えています。

また、要素自体の高さを取得/設定するだけです:

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

この Javascript は、インライン スクリプト タグ内の target_box の終了タグの直後にダンプする必要があります。

Answer 20

これは、jQuery と組み合わせて使用​​したソリューションです。これは、次の HTML 構造で機能します。

<nav id="main-nav">
    <ul>
        <li>
            <a class="main-link" href="yourlink.html">Link</a>
            <ul>
                <li><a href="yourlink.html">Sub Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

そして機能：

    $('#main-nav li ul').each(function(){
        $me = $(this);

        //Count the number of li elements in this UL
        var liCount = $me.find('li').size(),
        //Multiply the liCount by the height + the margin on each li
            ulHeight = liCount * 28;

        //Store height in the data-height attribute in the UL
        $me.attr("data-height", ulHeight);
    });

次に、クリック機能を使用して高さを設定および削除できますcss()

$('#main-nav li a.main-link').click(function(){
    //Collapse all submenus back to 0
    $('#main-nav li ul').removeAttr('style');

    $(this).parent().addClass('current');

    //Set height on current submenu to it's height
    var $currentUl = $('li.current ul'),
        currentUlHeight = $currentUl.attr('data-height');
})

CSS:

#main-nav li ul { 
    height: 0;
    position: relative;
    overflow: hidden;
    opacity: 0; 
    filter: alpha(opacity=0); 
    -ms-filter: "alpha(opacity=0)";
    -khtml-opacity: 0; 
    -moz-opacity: 0;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#main-nav li.current ul {
    opacity: 1.0; 
    filter: alpha(opacity=100); 
    -ms-filter: "alpha(opacity=100)";
    -khtml-opacity: 1.0; 
    -moz-opacity: 1.0;
}

.ie #main-nav li.current ul { height: auto !important }

#main-nav li { height: 25px; display: block; margin-bottom: 3px }

Answer 21

すべてを詳しく読んだわけではありませんが、最近この問題が発生したため、次のことを行いました。

div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}

div.class:hover{
   min-height:100%;
   max-height:3000px;
}

これにより、最初は最大 200px の高さのコンテンツを表示する div を持つことができ、ホバーするとそのサイズは少なくとも div のコンテンツ全体と同じ高さになります。Divは3000pxにはなりませんが、3000pxは私が課している制限です。:hover 以外でトランジションを行うようにしてください。そうしないと、奇妙なレンダリングが発生する可能性があります。このようにして、:hover は非 :hover から継承されます。

px から % または auto への遷移は機能しません。同じ測定単位を使用する必要があります。

Answer 22

Jake の max-height ソリューションは、指定されたハードコードされた max-height 値が実際の高さよりもそれほど大きくない場合にうまく機能します (そうしないと、望ましくない遅延やタイミングの問題が発生するため)。一方、ハードコードされた値が誤って実際の高さよりも大きくない場合、要素は完全には開きません。

次の CSS のみのソリューションでは、ハードコーディングされたサイズも必要です。これは、発生する実際のサイズのほとんどよりも大きくする必要があります。ただし、このソリューションは、実際のサイズがハードコードされたサイズよりも大きい場合にも機能します。その場合、トランジションは少しジャンプする可能性がありますが、部分的に表示されている要素から離れることはありません。したがって、このソリューションは、データベースなどの不明なコンテンツにも使用できます。この場合、コンテンツは通常 x ピクセルより大きくないことがわかっていますが、例外があります。

margin-bottom (または若干異なるアニメーションの場合は margin-top) に負の値を使用し、overflow:hidden を使用してコンテンツ要素を中間要素に配置することを考えます。コンテンツ要素の負のマージンは、中間要素の高さを減らします。

次のコードでは、margin-bottom で -150px から 0px へのトランジションを使用しています。コンテンツ要素が 150px を超えない限り、これだけでも問題なく機能します。さらに、中間要素の max-height で 0px から 100% への遷移を使用します。これにより、コンテンツ要素が 150px を超える場合、最終的に中間要素が非表示になります。max-height の場合、トランジションは、スムーズな視覚効果のためではなく、閉じるときにアプリケーションを 1 秒遅らせるために使用されます (したがって、0px から 100% まで実行できます)。

CSS:

.content {
  transition: margin-bottom 1s ease-in;
  margin-bottom: -150px;
}
.outer:hover .middle .content {
  transition: margin-bottom 1s ease-out;
  margin-bottom: 0px
}
.middle {
  overflow: hidden;
  transition: max-height .1s ease 1s;
  max-height: 0px
}
.outer:hover .middle {
  transition: max-height .1s ease 0s;
  max-height: 100%
}

HTML:

<div class="outer">
  <div class="middle">
    <div class="content">
      Sample Text
      <br> Sample Text
      <br> Sample Text
      <div style="height:150px">Sample Test of height 150px</div>
      Sample Text
    </div>
  </div>
  Hover Here
</div>

margin bottom の値は負で、可能な限りコンテンツ要素の実際の高さに近づける必要があります。それ（絶対値）が大きい場合、最大高さのソリューションと同様の遅延とタイミングの問題がありますが、ハードコードされたサイズが実際のサイズよりも大きくない限り、制限することができます。margin-bottom の絶対値が実際の高さよりも小さい場合、tansition は少しジャンプします。どのような場合でも、遷移後、コンテンツ要素は完全に表示されるか完全に削除されます。

詳細については、私のブログ投稿http://www.taccgl.org/blog/css_transition_display.html#combined_heightを参照してください。

Answer 23

これは正確には問題の「解決策」ではありませんが、回避策です。テキストで書かれたとおりにしか機能しませんが、必要に応じて他の要素で機能するように変更できます。

.originalContent {
    font-size:0px;
    transition:font-size .2s ease-in-out;
}
.show { /* class to add to content */
    font-size:14px;
}

以下に例を示します: http://codepen.io/overthemike/pen/wzjRKa

基本的に、font-size を 0 に設定し、height、max-height、scaleY() などの代わりに、必要な高さに変換するのに十分な速さで移行します。CSS を使用して実際の高さを auto に変換することは現在のところ不可能ですが、その中でコンテンツを変換することは可能であるため、font-size トランジションです。

• 注 - コードペンには JavaScript がありますが、アコーディオンをクリックして css クラスを追加/削除することだけが目的です。これは非表示のラジオ ボタンを使用して行うことができますが、高さの変換だけに焦点を当てていませんでした。

Answer 24

このアニメーションを実現するために、max-height と負のマージンの両方を組み合わせました。

私は max-height: 2000px を使用しましたが、必要に応じてその数値をより高い値にプッシュできます。展開時の最大高さと折りたたみ時のマージンをアニメーション化します。

js 部分はクリックするだけで、:hover または純粋な css ソリューションのチェックボックスに置き換えることができます。

これまでに確認できる問題は 2 つだけです。

1. 移行タイミングは限られています。（私は2つのタイミングだけを追加しました）
2. ドロップダウンが折りたたまれている間にもう一度クリックすると、ドロップダウンがジャンプします。

これが結果です

[...document.querySelectorAll('.ab')].forEach(wrapper => {
    wrapper.addEventListener('click', function () {
        this.classList.toggle('active');
    });
});

* {
  margin: 0;
  box-sizing: border-box;
}

.c {
  overflow: hidden;
}

.items {
  width: 100%;
  visibility: hidden;
  max-height: 0;
  margin-bottom: -2000px;
  -webkit-transition: margin 0.6s cubic-bezier(1, 0, 1, 1), max-height 0s 0.6s linear, visibility 0s 0.6s linear;
  transition: margin 0.6s cubic-bezier(1, 0, 1, 1), max-height 0s 0.6s linear, visibility 0s 0.6s linear;
}
.items > * {
  padding: 1rem;
  background-color: #ddd;
  -webkit-transition: background-color 0.6s ease;
  transition: background-color 0.6s ease;
}
.items > *:hover {
  background-color: #eee;
}

.ab {
  padding: 1rem;
  cursor: pointer;
  background: #eee;
}
.ab.active + .c .items {
  max-height: 2000px;
  margin-bottom: 0;
  visibility: visible;
  -webkit-transition: max-height 0.6s cubic-bezier(1, 0, 1, 1);
  transition: max-height 0.6s cubic-bezier(1, 0, 1, 1);
}

.dropdown {
  margin-right: 1rem;
}

.wrapper {
  display: -webkit-box;
  display: flex;
}

<div class="wrapper">
    <div class="dropdown">
        <div class="ab">just text</div>
        <div class="ab">just text</div>
        <div class="ab">dropdown</div>
        <div class="c">
            <div class="items">
                <p>items</p>
                <p>items</p>
                <p>items asl;dk l;kasl;d sa;lk</p>
                <p>items sal;kd</p>
                <p>items</p>
            </div>
        </div>
        <div class="ab">just text</div>
        <div class="ab">just text</div>
    </div>
    
    <div class="dropdown">
        <div class="ab">dropdown</div>
        <div class="c">
            <div class="items">
                <p>items</p>
                <p>items</p>
                <p>items</p>
                <p>items</p>
                <p>items</p>
                <p>items</p>
                <p>items</p>
                <p>items</p>
                <p>items</p>
                <p>items</p>
                <p>items</p>
            </div>
        </div>
        <div class="ab">text</div>
    </div>
    
    <div class="dropdown">
        <div class="ab">placeholder</div>
        <div class="ab">dropdown</div>
        <div class="c">
            <div class="items">
                <p>items</p>
                <p>items</p>
            </div>
        </div>
        <div class="ab">placeholder</div>
        <div class="ab">placeholder</div>
        <div class="ab">placeholder</div>
    </div>
</div>
<h1>text to be pushed</h1>

Answer 25

小さな JAVASCRIPT + SCSS ソリューション

私は通常、まったく異なる視点と (非常に) 小さな JavaScript を使用します。問題は次のとおりです。

• 私たちが本当に欲しいのは高さの変更です

• 高さは、サブメニュー内のすべてのリスト項目の合計です

• スタイルを設定しているので、通常はリスト項目の高さを知っています

したがって、私の解決策は、アイテム名が1行しかない「通常の」サブメニューに適用されます。とにかく、もう少し js を使用すると、複数の行名に対応できます。

基本的には、サブメニュー項目を数えて、それに応じて特定のクラスを適用するだけです。次に、ボールを (s)css に渡します。たとえば、次のようになります。

var main_menu = $('.main-menu');
var submenus = $('.main-menu').find('.submenu');
submenus.each(function(index,item){
   var i = $(item);
   i.addClass('has-' + i.find('li').length + '-children');
});

明らかに、任意のクラス/セレクターを使用できます。この時点で、次のようなサブメニューがあります。

<ul class="submenu has-3-children">
   <li></li>
   <li></li>
   <li></li>
</ul>

そして、私たちのcssは次のようになります:

.submenu{
   //your styles [...]
   height:0;
   overflow:hidden;
   transition: all 200ms ease-in-out; //assume Autoprefixer is used
}

次のようないくつかの scss 変数もあります (任意の例)。

$sub_item_height:30px;
$sub_item_border:2px;

この時点で、開いたメイン メニュー項目が 'opened' などのクラス (実装..) を取得すると仮定すると、次のようなことができます。

//use a number of children reasonably high so it won't be overcomed by real buttons
.main-menu .opened .submenu{
   &.has-1-children{ height:   $sub_item_height*1  + $sub_item_border*1;  }
   &.has-2-children{ height:   $sub_item_height*2  + $sub_item_border*2;  }
   &.has-3-children{ height:   $sub_item_height*3  + $sub_item_border*3;  }
   //and so on....
}

または、短くするには：

.main-menu .opened .submenu{
   @for $i from 1 through 12{//12 is totally arbitrary
      &.has-#{$i}-children { height: $menu_item_height * $i + $menu_item_border * $i; }
   }
}

ほとんどの場合、これで問題は解決します。それが役に立てば幸い！

Answer 26

max-height を none に設定し、高さを取得し、max-height を計算された高さに再設定することで、これを機能させました。私にとっては完全に機能します。私はこれをアコーディオンメニューで<h5>機能させまし<div>た<div>。

JS:

$('h5').click(function(e) {
  $(this).parent('div').addClass('temp_expanded');
  var getheight = ($(this).parent('div').find('div').height());
  $(this).parent('div').removeClass('temp_expanded');
  $(this).parent('div').find('div').css('max-height', getheight);
});

以下：

div {
> div {
    max-height: 0px;
    overflow: hidden;
    .transition(all 0.3s ease-in-out);
}

&.temp_expanded {
    > div {
        max-height: none;
    }
}

Answer 27

高さを自動に設定し、最大高さを移行します。

Chrome v17 でテスト済み

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}

Answer 28

やや関連する質問に関する私の投稿をチェックしてください。

基本的に、 から開始しheight: 0px;、JavaScript によって計算された正確な高さに遷移させます。

function setInfoHeight() {
  $(window).on('load resize', function() {
    $('.info').each(function () {
      var current = $(this);
      var closed = $(this).height() == 0;
      current.show().height('auto').attr('h', current.height() );
      current.height(closed ? '0' : current.height());
    });
  });

ページがロード/サイズ変更されるたびに、クラスinfoを持つ要素のh属性が更新されます。次に、ボタンをトリガーしstyle="height: __"て、以前に設定したh値に設定します。

function moreInformation() {
  $('.icon-container').click(function() {
    var info = $(this).closest('.dish-header').next('.info'); // Just the one info
    var icon = $(this).children('.info-btn'); // Select the logo

    // Stop any ongoing animation loops. Without this, you could click button 10
    // times real fast, and watch an animation of the info showing and closing
    // for a few seconds after
    icon.stop();
    info.stop();

    // Flip icon and hide/show info
    icon.toggleClass('flip');

    // Metnod 1, animation handled by JS
    // info.slideToggle('slow');

    // Method 2, animation handled by CSS, use with setInfoheight function
    info.toggleClass('active').height(icon.is('.flip') ? info.attr('h') : '0');

  });
};

infoこれがクラスのスタイリングです。

.info {
  padding: 0 1em;
  line-height: 1.5em;
  display: inline-block;
  overflow: hidden;
  height: 0px;
  transition: height 0.6s, padding 0.6s;
  &.active {
    border-bottom: $thin-line;
    padding: 1em;
  }
}

クロスブラウザーではスタイリングがサポートされていない可能性があります。このコードの実際の例を次に示します。

コードペン

Answer 29

これは私がこのように解決した通常の問題です

http://jsfiddle.net/ipeshev/d1dfr0jz/

クローズ状態の遅延を負の数に設定して、値を少し変更してみてください。あなたは違いを見るでしょう.それはほとんど人間の目で嘘をつくことができます;)。

主要なブラウザで動作しますが、私には十分です。奇妙ですが、いくつかの結果を示します。

.expandable {
    max-height: 0px;
    overflow: hidden;
    transition: all 1s linear -0.8s;
}

button:hover ~ .expandable {
    max-height: 9000px;
    transition: all 1s ease-in-out;
}

Answer 30

高さの代わりに、以下のようなものを使用してください

#child0 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: absolute;
} 

#parent0:hover #child0 {
  visibility: visible;
  opacity: 1;
  position: relative;
}

うまく機能します。プレフィックスを追加してください。これが誰かに役立つことを願っています。

PS: 黒魔術の高さにまだ高さ 0 が必要な場合は、 に追加height: 0;してからに#child0追加できます。同時に、高さのトランジションを個別に、またはすべて追加できます。height: inherit#parent0:hover #child0

Answer 31

私は今日この問題をしばらく見ていて、この解決策に出くわしました:

max-height を使用し、コンテナのコンテンツの計算された高さに基づいて max-height を動的に設定します

$(obj).children().each(function(index, element) {
   InnerHeight += $(this).height();
});

フルサイズでアニメーション化するには:

$(obj).removeClass('collapsed').css('max-height', InnerHeight);

小さいサイズにアニメーション化するには:

$(obj).removeClass('collapsed').css('max-height', MySmallerHeight);

CSS3 transition:max-height; を使用します。

こうすることで、グリッチに見えるアニメーションが高さを大幅に超えないようにし、コンテンツがクリッピングされるリスクを回避できます。

Answer 32

短いコード例:

.slider ul {
  overflow: hidden;
  -webkit-transition: max-height 3.3s ease;
}

.slider.hide ul {
  max-height: 0px;
}

.slider.show ul {
  max-height: 1000px;
}

Answer 33

私はこの問題に遭遇し、回避策を見つけました。

まずは使ってみましたmax-height。しかし、次の 2 つの問題があります。

1. max-height不明な長さのテキスト ブロックを展開しているため、が何なのかよくわかりません。
2. 大きく設定しmax-heightすぎると、崩壊時に大きな遅延が発生します。

次に、私の回避策：

function toggleBlock(e) {
    var target = goog.dom.getNextElementSibling(e.target);
    if (target.style.height && target.style.height != "0px") { //collapsing
        goog.style.setHeight(target, target.clientHeight);
        setTimeout(function(){
            target.style.height = "0px";
        }, 100);
    } else { //expanding
        target.style.height = "auto";
        //get the actual height
        var height = target.clientHeight;
        target.style.height = "0px";
        setTimeout(function(){
            goog.style.setHeight(target, height);
        }, 100);
        setTimeout(function(){
            //Set this because I have expanding blocks inside expanding blocks
            target.style.height="auto";
        }, 600); //time is set 100 + transition-duration
    }
}

scss:

div.block {
    height: 0px;
    overflow: hidden;
    @include transition-property(height);
    @include transition-duration(0.5s);
}

Answer 34

これは私が使ってきたものです。

基本的に、すべての子要素の高さを取得し、それらを合計してから、要素の最大高さを設定して、クラスをオーバーライドします (独自のクラスを作成できるため、異なるインスタンスを持つことができます)。

見てみな。

                            <!doctype html>
                            <html>

                            <head>
                                <style>
                                    /* OVERFLOW HIDDEN */
                                    .overflowHidden{
                                        overflow: hidden;
                                    }

                                    /* HEIGHT */
                                    .transitionHeight{
                                        -webkit-transition: max-height 250ms ease-in-out;
                                        -moz-transition: max-height 250ms ease-in-out;
                                        -o-transition: max-height 250ms ease-in-out;
                                        -ms-transition: max-height 250ms ease-in-out;
                                        transition: max-height 250ms ease-in-out;
                                    }
                                    .heightAnimOff{
                                        height: auto;
                                        max-height: 0px;
                                    }
                                    .heightAnimOn{
                                        height: auto;
                                        max-height: 20000px;
                                    }

                                </style>
                                <script src="jquery_1.8.3.min.js" type="text/javascript"></script>
                                <script type="text/javascript">
                                    (function($){
                                            $.toggleAnimHeight = function(alvo, velha, nova){
                                                if ( $(alvo).attr("data-maxHeight") != null ){
                                                }else{
                                                    var totalH = 0;
                                                    $(alvo).children().each(function(){
                                                        totalH += $(this).height();
                                                    });
                                                    $(alvo).attr("data-maxHeight", totalH)
                                                    $("head").append('<style> .'+nova+'{ max-height: '+totalH+'px; } </style>');
                                                }           
                                                if ( $(alvo).attr("class").indexOf(nova) == -1 ){
                                                    $(alvo).removeClass(velha);
                                                    $(alvo).addClass(nova);
                                                }else {
                                                    $(alvo).removeClass(nova);
                                                    $(alvo).addClass(velha);
                                                }
                                            }
                                    }(jQuery));
                                </script>
                            </head>

                            <body>
                                <div class="animContainer">
                                    <button onmousedown="$.toggleAnimHeight( $('#target1'), 'heightAnimOff', 'heightAnimOn' );">Anim Toggle</button>
                                    <div id="target1" class="overflowHidden heightAnimOff transitionHeight">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id pretium enim, quis faucibus urna. Phasellus blandit nisl eget quam mollis vulputate. Sed pulvinar eros vitae neque volutpat, vitae suscipit urna viverra. Etiam rhoncus purus vitae tortor pulvinar, sed vulputate arcu convallis. Sed porta, mi consectetur convallis semper, odio mauris iaculis purus, non tempor purus augue pharetra lorem. Integer dictum lacus arcu. Vivamus metus lorem, fermentum ac egestas ac, ornare non neque. Aenean ullamcorper adipiscing ante, et mollis orci feugiat et.</p>

                                        <p>Praesent pretium sit amet eros et lacinia. Etiam nec neque ullamcorper, sagittis quam vitae, dictum ipsum. Sed volutpat lorem libero, nec commodo magna posuere rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque id erat odio. Sed faucibus sem eu tortor laoreet pulvinar. Praesent pharetra risus eget metus vulputate, eget condimentum leo consequat. Praesent consequat rutrum convallis.</p>

                                        <p>Aenean euismod metus quis libero commodo, tristique cursus odio vestibulum. Donec quis lobortis arcu, eu luctus diam. In eget nisi non mauris commodo elementum. Sed gravida leo consequat, tempus orci eu, facilisis ipsum. Cras interdum sed odio vel tincidunt. Morbi arcu ipsum, ultricies dictum enim quis, varius dignissim massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper, magna eu aliquam luctus, leo purus accumsan massa, at auctor dui dolor eu augue. Maecenas ultrices faucibus ante non mattis.</p>

                                        <p>Pellentesque ut est tortor. Quisque adipiscing ac nisi vel interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut facilisis ante sollicitudin vehicula ornare. Quisque sagittis diam nibh, ac imperdiet nibh pulvinar eu. Integer at ipsum a purus tristique porttitor vitae in ante. Sed arcu neque, lacinia eu dolor nec, pellentesque interdum tortor. Morbi ornare aliquet aliquam. Aenean egestas, erat vel tempus mollis, est eros iaculis enim, quis fringilla purus tortor sollicitudin erat. Donec ultrices elit metus, sed iaculis mi dignissim vulputate. Donec adipiscing imperdiet porttitor. Sed ac lacus adipiscing, sagittis sem quis, tincidunt metus. Curabitur vitae augue a dolor scelerisque lobortis ut a nisi.</p>

                                        <p>Quisque sollicitudin diam sit amet dui sollicitudin, ac egestas turpis imperdiet. Nullam id dui at lectus ultrices aliquam. Nam non luctus tortor, vitae elementum elit. Nullam id bibendum orci. Aliquam hendrerit nisi vitae tortor mollis, nec aliquam risus malesuada. In scelerisque nisl arcu, sit amet tincidunt libero consequat pharetra. Quisque aliquam consectetur purus nec sollicitudin. Pellentesque consectetur eleifend tortor in blandit. Pellentesque euismod justo sed lectus congue, ut malesuada diam rhoncus. Nulla id tempor odio. Nulla facilisi. Phasellus lacinia neque in nisi congue aliquet. Aliquam malesuada accumsan mauris eget mattis. Maecenas pellentesque, sem sed ultricies ullamcorper, massa enim consectetur magna, eget sagittis lorem leo vel arcu. Cras ultrices nunc id risus commodo laoreet. Proin nisl nulla, elementum ac libero sed, aliquam mollis massa.</p>
                                    </div>
                                </div>
                            </body>

                            </html>