全高Web應用程序

我想讓我的網站充分利用瀏覽器的全部高度。我嘗試了所有通常的CSS無濟於事。 id像側欄和主要內容填充瀏覽器的全部高度，而標題應保持固定的高度。全高Web應用程序

任何幫助表示讚賞感謝達摩

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

}

來源

2012-10-01 user1438082

香港專業教育學院決定不重新發明輪子，並使用它。對於閱讀此內容的任何人，請遵循此建議，否則您將發瘋！ Description of Solution

這使我這個

Solution

來源

2012-10-04 16:32:32 user1438082

如果我理解你，這是你想要什麼：

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

我已經減少了768號佔的jsfiddle測試窗口小尺寸。當窗口高度大於指定值時，您可以看到側欄和主內容填滿窗口。 注意：jsFiddle不運行服務器端代碼，所以你的asp.net控件是不必要的。

來源

2012-10-01 21:06:13 Kev

道歉。我已經澄清了這個問題。我只想要一個完整的高度應用程序。 – user1438082

你是什麼意思？它是全高。我誤解你了嗎？ - 您希望主要內容div和sidebar div填充瀏覽器，這就是我的解決方案。 – Kev

好吧，我看到你的編輯，但我仍然不明白。標題已保持一個固定的高度。你在測試什麼瀏覽器？我正在使用Chrome。 – Kev

-1

你必須使用媒體查詢，像這樣：

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

來源

2012-10-01 21:08:05 WebDeveloper

你好，我已經澄清了這個問題。請忽略768px請求。 – user1438082

嗯，你總是可以設置

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

你會希望通過JavaScript你想要的元素的高度（here is an updated demo）

將此代碼添加到像這樣的調整大小事件 $(window).resize(function() {});（jsFiddle似乎妨礙了修改此事件）

此外，我remov編輯最小高度，並使內容窗格使用overflow-y：scroll來處理此問題，因爲我認爲它會更好地工作，並支持更廣泛的瀏覽器，但這種方法並不需要。

來源

2012-10-01 21:32:32

同樣對於純粹的CSS問題CSS Desk非常好（http://cssdesk.com/TqwWF） –

嗨。這在Chrome中工作，但不在IE8中。這是預期的嗎？ – user1438082

我知道有人已經提供了一個JavaScript解決方案，但如果您想要純CSS，那麼請嘗試將#ContentWrapper，UpdatePanel和窗體的高度設置爲100％。

將這個head部分

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

}

來源

2012-10-01 22:22:30

或者你可以添加一個高度爲周圍的div：auto！important; height：100％; margin：auto; min-height：100％; –

我是純CSS的粉絲。 +1 –

嗨，編號喜歡使用純CSS也。我嘗試了你的代碼，並在頁面試圖加載時在Visual Studio中出現以下錯誤：「控件集合無法修改，因爲控件包含代碼塊（即<% ... %>）。」 - 在HTML中（在Visual Studio中編譯之前）它會在編譯前給出錯誤 - 「在樣式規則中缺少選擇器」 – user1438082

全高Web應用程序

回答

相關問題