CSS3定位/高度问题

Question

我正在开展一个元素，正在插入一些 CSS3 动画代码到使用模板制作的网站上。

出现动画元素尺寸过大的问题。

这是 the website (向下滚动动画)

这是 the fiddle如果有人想查看该动画。

一些可能有用的基本代码..

CSS:

#backgroundAnimation{
    color:#3c3c3c;
}

#containerAnimation{
    margin:0 auto;
/*    float : left;*/
    text-align: center;
    height: 100%;
    width:100%;
}

#innerWrapperAnimation{
    margin: 0 auto;
    border: 2px solid;
    float:none;
    position: relative;
    overflow:hidden;
    width:100%;
    display:block;
    height: auto;   
    background: no-repeat scroll 0 0;
    background-size: 100% 100%;
    max-width: 1460px;
}

HTML:

<div id="containerAnimation">
    <div id="innerWrapperAnimation">
        <div><img class="lightsAnimation" id="light1Animation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Light-1.png" /></div>
        <img class="lightsAnimation" id="light2Animation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Light-2.png" />
        <img class="lightsAnimation" id="cameraFlashAnimation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Camera-Flash.png" />
        <img id="backgroundAnimation" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/bg3.png" />
        <img class="boxAnimation" id="goodBox1" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox2" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox3" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox4" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img class="boxAnimation" id="goodBox5" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-1.png" />
        <img id="badBox1" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Box-2.png" />
        <img id="pistonBase" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_base.png" />
        <img id="pistonHead" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_head.png" />
        <img id="pistonOutline" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/piston_top.png" />
        <div id="waveDisplay"><img id="waveImage" alt="" src="http://www.planetgmachines.com/wp-content/uploads/2014/03/Vital-sign-1.png" /></div>
    </div>
</div>

我的 css 很糟糕，如果有人可以通过使用 Firebug 或任何其他调试器帮助我，并指出我需要进行更改的地方。会很棒。

我认为这对你们这些专业人士来说真的是一个小问题。

更新:动画容器的高度在网站内发生变化。我认为这就是问题所在。

Answer 1

您的更新是正确的。

<br>您的动画元素(框)之间导致您的容器高度扩大。

如果添加 CSS:#innerWrapperAnimation br { display: none;} ，它解决了您的问题(或者，只是不包含 <br> 元素)