IE高度80％似乎不起作用

Question

我正试图将Youtube播放器的高度定位到80％。我试图找出原因，我试图将html和body标签设置为100％，我遇到了一些问题。我正在使用wordpress，所以我将发布自定义的.php页面代码以及css。

CSS

body {
    width:100%;
    height:100%;
}

yt_page_wrapper {
    width:100%;
    height:100%;
}

#ytvideo2 {
    float: left;
    width:100%;
    height:80%;

}


.yt_holder {
    background: #f3f3f3;
    float: left;
    border: 1px solid #e3e3e3;
}

#yt_page_wrapper ul.demo2 {
    float:left;
    clear:both;
    overflow: auto;
    height:110px;
    width:100%;
    background-color:#000000;
}

#yt_page_wrapper ul {
    margin: 0;
    padding: 0;
    overflow: auto;
}

#yt_page_wrapper ul li {
    list-style-type: none;
    display:block;
    float:left;
        margin-bottom: 5px;
    padding:5px;
    width:130px;

}

#yt_page_wrapper ul li img {
    width: 120px;
    border: 5px solid #BDBDBD;
}

#yt_page_wrapper.ul li a {
    font-family: georgia;
    text-decoration: none;
    display: block;
    color: #000;
}


ul.demo2::-webkit-scrollbar {
    width: 12px;
}

ul.demo2::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(225,228,196,1); 
    border-radius: 10px;
}

ul.demo2::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(225,228,196,1);
}

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
}

HTML

<?php
/*
Template Name: Full Width
*/

get_header();

?>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="wp-content/themes/swatch/jquery.youtubeplaylist.js"></script>
<link rel = "stylesheet" type = "text/css" href = "wp-content/themes/swatch/yt_video.css" title = "Style 2"/>

<script type="text/ecmascript">

        $(function() {
            $("ul.demo1").ytplaylist({deepLinks: true});
            $("ul.demo2").ytplaylist({
                addThumbs:true, 
                autoPlay: true,
                onChange: function() {
                    console.log('changed');
                },
                holderId: 'ytvideo2'});
        });

</script>


    <br><br>

<div id="yt_page_wrapper">
     <div id="ytvideo2"></div>
        <ul class="demo2">

        <li><a href="http://www.youtube.com/watch?v=v__h2wgNwCc&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=1"></a></li>
            <li><a href="http://www.youtube.com/watch?v=zjjBr2WC3-o&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=2"></a></li>
            <li><a href="http://www.youtube.com/watch?v=vO3jPp6R5MQ&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=3"></a></li>
            <li><a href="http://www.youtube.com/watch?v=5oYwElFASBw&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=4"></a></li>
            <li><a href="http://www.youtube.com/watch?v=3SgkdP8oF70&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=5"></a></li>
            <li><a href="http://www.youtube.com/watch?v=u1c8WnOk2s0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=6"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
            <li><a href="http://www.youtube.com/watch?v=ajhW-51Gbs0&list=PLnDXA8GSSyt3an_3U3bJsdJqqgJNe9gLw&index=7"></a></li>
        </ul>
</div>

<p style="position:relative; left:-5000px;">Hi</p>


<?php get_footer();?>

它在Chrome上工作正常，所以我还没有在firefox或opera上测试它。你可以在这里查看页面;

http://design.jarethmusic.com/

我只在IE9中测试过 - 没有任何其他因为我无法访问我的桌面所以我在我的lappy上。

约翰