asp.net - フルハイト Web アプリケーション

Question

私のウェブサイトでブラウザの全高を利用したいと思います。私はすべての通常のcssを無駄にしようとしました。サイドバーやメインコンテンツのようにブラウザの高さいっぱいに表示し、ヘッダーは固定の高さのままにする必要があります。

ダモに感謝します

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);

このコードをサイズ変更イベントに次のように追加することをお勧めします$(window).resize(function() {});(jsFiddle がこのイベントの変更の邪魔になるようです)。

また、min-height を削除し、コンテンツペインで overflow-y: scroll を使用するようにしました。これは、より適切に機能し、より幅広いブラウザーをサポートできると考えたからですが、このアプローチでは必要ありません。

score 0 · Accepted Answer

私があなたを理解しているなら、これはあなたが望むものです：

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

jsFiddle のテストウィンドウのサイズが小さいことを考慮して、768 という数字を減らしました。ウィンドウの高さが指定値よりも大きくなると、サイドバーとメインコンテンツがウィンドウいっぱいに表示されることがわかります。注: 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