asp.net - 全高 Web 应用程序

Question

我想让我的网站充分利用浏览器的高度。我尝试了所有常用的 css 无济于事。id 像侧边栏和主要内容填充浏览器的整个高度，而标题应保持固定高度。

任何帮助感谢达摩

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="assets/js/jquery.js" type="text/javascript"></script>
    <title>TestSite</title>
    <link href="assets/css/Main.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="True">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel" runat="server">
        <ContentTemplate>
            <div id="HeaderWrapper">
                <div id="Header">
                </div>
            </div>
            <div id="ContentWrapper">

                <div id="Sidebar">

                </div>
                <div id="Content" style="border: thin solid #666666"  class="Tabs">
                </div>
                <!-- end of content -->        
            </div>
            <!-- end of wrapper -->
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

CSS

#HeaderWrapper 
{
    width: 100%;
    clear: both;
    height: 80px;
    margin-top:2px;
    margin-bottom:2px;
    margin-right:0px;
    margin-left:0px;    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#99CCFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#9CF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFF,  #9CF); /* for firefox 3.6+ */   

    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px;
    border-bottom:thin solid #FFFFFF;

}

#Header
{    

    width:1024px;
    margin: 0 auto;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px; 
    border-radius: 5px;    



}

#ContentWrapper 
{
    width:1024px;
    margin: 0 auto;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px; 
    border-radius: 5px;    


}


/* sidebar */

#Sidebar {

    float: left;
    width: 184px;
    padding: 0px;
    height:800px;
    border: thin solid #666666;
    padding:0px;
    border-radius: 0px;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:6px;
    margin-left:0px;    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFF,  #FFF); /* for firefox 3.6+ */ 


}


/* end of sidebar -->

/* content */

#Content {
    float: left;
    width: 824px;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px; 
    min-height:800px;
    border-radius: 0px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #FFF,  #FFF); /* for firefox 3.6+ */ 
}
/* End content */



/* End content */
html,body {
    margin:0px;
    padding:0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height:1.5em;     
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #036,  #FFF); /* for firefox 3.6+ */ 
    height: 100%;    

}

score 4 · Accepted Answer

我知道有人已经提供了一个带有 javascript 的解决方案，但如果你想要纯 CSS，请尝试将 #ContentWrapper、UpdatePanel 和表单的高度设置为 100%。

把这个放在头部

<style type="text/css">
    #<%=UpdatePanel.ClientID%> 
    {
        height: 100%;    
    }
</style>

更新您的 CSS 文件：

#ContentWrapper 
{
    height: 100%;
    width:1024px;
    margin: 0 auto;
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    padding-left:0px; 
    border-radius: 5px;    
}

html,body, form {
    margin:0px;
    padding:0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height:1.5em;     
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003366', endColorstr='#FFFFFF'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#036), to(#FFF)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #036,  #FFF); /* for firefox 3.6+ */ 
    height: 100%;    

}

score 1 · Accepted Answer

那么你总是可以通过 JavaScript 设置你想要的元素的高度（这里是一个更新的演示）

var height = $(window).height()-$("#HeaderWrapper").height()-10;
$("#Sidebar,#Content").css("height", height);

您可能希望像这样在 resize 事件中添加此代码$(window).resize(function() {});（jsFiddle 似乎妨碍了修改此事件）

此外，我删除了 min-height 并使内容窗格在处理此问题时使用 overflow-y: scroll 因为我认为它会更好地工作并支持更广泛的浏览器，但这种方法不需要这样做。

score 0 · Accepted Answer

如果我理解你，这就是你想要的：

http://jsfiddle.net/KZurX/11/

我已经减少了 768 数字以说明 jsFiddle 中测试窗口的小尺寸。可以看到，当窗口高度大于指定值时，侧边栏和主要内容会填满窗口。注意：jsFiddle 不运行服务器端代码，因此您的 asp.net 控件是不必要的。

score 0 · Accepted Answer

我决定不重新发明轮子并使用它。对于阅读本文的任何人，请遵循此建议，否则您会发疯的！解决方案说明

这让我想到了这个

解决方案

score -1 · Accepted Answer

您必须使用媒体查询，如下所示：

@media (min-width: 768px) {
    body{
        height:100%;
    }
}

asp.net - 全高 Web 应用程序

5 回答 5

Related

Reference