Question

我有一个包含1个包含2行的表的aspx页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
        html, body 
        { 
            height: 100%; 
        } 
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                <table style="height:100%; width:100%">
                    <tr>
                        <td>                
                            <img src="img/Logo.png" />
                        </td>
                    </tr>
                    <tr>
                        <td style="height:100%;">                     
                            <asp:Silverlight 
                                ID="sllUI" 
                                runat="server" 
                                Source="~/ClientBin/My.Silverlight.UI.xap" 
                                MinimumVersion="2.0.31005.0" 
                                Width="100%" 
                                Height="100%"
                                OnPluginLoaded="sllUI_OnPluginLoaded"
                                PluginBackground="Transparent"
                                Windowless="true">        
                            </asp:Silverlight>
                        </td>
                    </tr>
                </table>                            
            </div>
        </form>
    <body>
</html>

表格正确填充页面，底部行填充增长到顶行未填充的表格的剩余高度，这就是我想要的。问题是silverlight控件占据了页面的高度，而不是它所在的行的高度，这导致我的页面得到滚动条，因为银色灯光控件的顶部位于行的顶部它是在，但它的高度是浏览器的100％。我不知道这是由我的HTML还是由silverlight引起的。我的所有silverlight用户控件都设置为自动高度＆amp;宽度。我也试过使用div而不是表格，我得到了相同的结果。我该如何解决这个问题？

我发现（至少在IE7中）我指定的doctype导致它使用标准模式IE6，但是如果我把doctype拿出来进入quirks模式IE5（我通过使用DebugBar v5找到模式） .1.1）。 Quirks模式使其显示正常，但我认为如果我能在标准模式下正确显示，我宁愿避免怪异模式。

Answer 1

尝试删除控件中的“高度”和“宽度”属性，如果您已正确定义内部XAP的高度和宽度以进行缩放（即您已使用“自动”），那么它应该尊重DOM边界它包含在页面上。

Answer 2

尝试使用某种脚本来确定页面的总高度......如下所示：


function getWindowHeight() {
    var windowHeight = 0;
    if (typeof(window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
    }
    else {
        if (document.documentElement && document.documentElement.clientHeight) {
            windowHeight = document.documentElement.clientHeight;
        }
        else {
            if (document.body && document.body.clientHeight) {
                windowHeight = document.body.clientHeight;
            }
        }
    }
    return windowHeight;
}

因此，您可以减去徽标高度并正确设置“身体”的高度，调整它以避免滚动。

Silverlight，xhtml和100％高度

2 个答案: