Silverlight 组件位置的 CSS 问题。无法设置我想要的高度答案

【问题标题】：CSS problem with silverlight component position. Cannot set height that i wantSilverlight 组件位置的 CSS 问题。无法设置我想要的高度
【发布时间】：2010-09-18 13:21:49
【问题描述】：

我想用 silverlight 制作简单的内容页面，并满足以下要求：页面必须包含：

横幅顶部空间(html)
中心 - 银光组件。他会伸展到合适的页面。
横幅底部空间(html)

看起来很简单，但我在使用 Internet Explorer 8 时遇到了问题。 Silverlight 组件尺寸小，不拉伸。在其他浏览器中它工作正常。

样式：

<style type="text/css">
    html, body
    {
        height: 100%;
        overflow: auto;
    }
    body
    {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost
    {
        height: 100%;
        text-align: center;
    }
</style>

HTML：

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" style="overflow: hidden;
    height: 100%; width: 100%;">
    <table  frame="none" cellpadding="0" cellspacing="0" style="height: 100%; width: 100%; border:0px solid White;
        padding: 0px;">
        <tr style="background-color: Red; height: 30px; width: 100%;">
            <td>
            </td>
        </tr>
        <tr style="background-color: Blue; height: 100%; width: 100%;">
            <td>
                <div id="silverlightControlHost" style="height: 100%; width: 100%; background-color: Black;">
                              <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                    width="100%" height="100%">
                    <param name="source" value="ClientBin/test.xap" />
                    <param name="onError" value="onSilverlightError" />
                    <param name="background" value="white" />
                    <param name="minRuntimeVersion" value="4.0.50401.0" />
                    <param name="autoUpgrade" value="true" />
                    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none">
                        <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Получить Microsoft Silverlight"
                            style="border-style: none" />
                    </a>
                </object>
                <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
                    border: 0px"></iframe>
                </div>
            </td>
        </tr>
        <tr style="background-color: Red; height: 30px; width: 100%;">
            <td>
            </td>
        </tr>
    </table>
</body>

Chrome（完美运行）：

IE8（不太好）：

这有什么问题吗？如何解决？

【问题讨论】：

标签： .net html css wpf silverlight

【解决方案1】：

我远离使用表格进行布局，但这只是我 :)

首先我会为布局创建一个保持 div，两个 div 用于顶部和底部以及 silverlight 控制主机 div 之间，例如

<div id="container">
    <div id="top">
    </div>
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="ClientBin/SilverlightApplication1.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="autoUpgrade" value="true" />
        </object>
        <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe>
    </div>
    <div id="bottom">
    </div>
</div>

您需要做的是在 silverlightControlHost 类中将位置切换到绝对位置，并对齐控件以在页面上伸展，在顶部和底部为您的 html div 容器留出空间

#silverlightControlHost 
{
    position: absolute;
    top:30px;
    bottom:30px;
    left:0px;
    right:0px;
    text-align:center;
}

这是其他 div 的 css 类

#top
{
   height:30px;
   width:100%;
}

#bottom{
   height:30px; 
   width:100%;
   bottom:0px;
   position:absolute;
} 

#container
{ 
    height: 100%;
    width:100%;
}

希望有帮助

编辑

发现底部没有定位到底部:)

#bottom{
   height:30px; 
   width:100%;
   bottom:0px;
   position:absolute;
}

【讨论】：

感谢您的快速回复。真的可以节省很多时间。抱歉，这可能是个简单的问题，但我是 html 新手。非常感谢。
我设置了 background-color:Red;并注意到，底部容器实际上不在屏幕底部。 :(我怎样才能把它移下来？
还有一个问题，ie 7. 属性 height:100% 根本不起作用。内容总是不可见！请帮忙:(
也许然后将容器类设置为 position:absolute;right:0px;left:0px;top:0px;bottom:0px;
发布另一个问题链接到这个问题，我没有 ie7