Geek asks and answers

CSS3 height difference on absolute positioned div to auto overflow

This example is pretty self-evident, I think, and I have no idea why the div is first compressed and not appear at the correct height.

here is a sample code

<div class="block">
  <div class="abs">
    hover me!!<br/>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  </div>
</div>

and CSS

.block {
  position: relative;
  height: 500px;
  width: 500px;
}

.abs {
  position: absolute;
  height: 40px;
  width: 200px;
  background-color: yellow;
  overflow: hidden;
}

.abs:hover {  height: auto; transition: height 1s; }

and here is the link to the violin with the content: http://jsfiddle.net/3G7vG/

I am testing this with the release of chrome Version 31.0.1650.63 Debian jessie / sid (238485) in my linux box

0
source share
3 answers

height:auto not supported as part of transition in css3.

You better try min-height, max-heightor transform(using scalex(aNumberBetweenZeroAndOne))

http://jsfiddle.net/LefQV/

+4
source

Since you set the height of div.abs to 40px

height: 40px;

Changed to Auto

 height:auto;

Full style

 .abs {
            position: absolute;
            height:auto;
            width: 200px;
            background-color: yellow;
            overflow: hidden;
        }
0

trying to use this as your css:

.block {
position: absolute;
height: 250px;
width: 250px;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
overflow:hidden;}
.abs {
position: absolute;
height: 40px;
width: 200px;
background-color: yellow;
overflow: hidden;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;}
.abs:hover {  height: 100%; }

try it

0
source

More articles:


All Articles