帶頁眉和頁腳以及100％內容的網頁div

我正在爲IE 8編寫一個網頁，該頁面頂部有一個徽標和標題div，中間是內容部分，底部是粘滯頁腳。問題是，我無法讓內容部分佔用剩下的100％。下面的代碼。無論何時將內容的高度設置爲100％，由於標題/徽標div，都會有100像素。我怎樣才能解決這個問題？帶頁眉和頁腳以及100％內容的網頁div

HTML

<%@ Master Language="C#" inherits="DenApp.master"%> 
<html> 
<head runat="server"> 
    <title>DenApp</title> 
    <script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script> 
    <link rel="Stylesheet" href="./css/master.css" /> 
</head> 
<body> 
    <div id="master_bodywrapper"> 
     <div id="master_maindiv"> 
      <div id="master_logodiv"> 
      </div> 
      <div id="master_tabsdiv"> 
      </div> 
      <div id="master_contentdiv"> 
       <asp:contentplaceholder ID="content" runat="server" /> 
      </div> 
     </div> 
     <div id="master_footerdiv"> 
     </div> 
    </div> 
</body> 
</html>

CSS

html, body 
{ 
    margin:0px; 
    padding:0px; 
    height:100%; 
    width:100%; 
} 
#master_bodywrapper 
{ 
    margin:0px; 
    padding:0px; 
    height:100%; 
    background-color:Black; 
} 
#master_maindiv 
{ 
    background-color:Orange; 
    padding-bottom:20px; 
    height:100%; 
} 
#master_logodiv 
{ 
    background-color:Blue; 
    height:50px; 
} 
#master_tabsdiv 
{ 
    background-color:Green; 
    height:50px; 
} 
#master_contentdiv 
{ 
    background-color:Yellow; 
} 
#master_footerdiv 
{ 
    background-color:Purple; 
    height:20px; 
    position:relative; 
    margin-top:-20px; 
    clear:both; 
}

小提琴加在請求：http://jsfiddle.net/zZUUW/5/

來源

2013-09-16 steventnorris

添加[的jsfiddle（http://jsfiddle.net/）和期望的答案呢:) – Alvaro

@Alvaro增加了的jsfiddle的請求:) – steventnorris

這個問題的答案我的需求是貝羅W上。使用另一個div的標題，絕對定位，並添加一個padding-top主分區給了我想要的效果。

HTML

<%@ Master Language="C#" inherits="DenApp.master"%> 
<html> 
<head runat="server"> 
    <title>DenApp</title> 
    <script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script> 
    <link rel="Stylesheet" href="./css/master.css" /> 
</head> 
<body> 
    <div id="master_bodywrapper"> 
     <div id="master_header"> 
      <div id="master_logodiv"> 
      </div> 
      <div id="master_tabsdiv"> 
      </div> 
     </div> 
     <div id="master_maindiv"> 
      <div id="master_contentdiv"> 
       <asp:contentplaceholder ID="content" runat="server" /> 
      </div> 
     </div> 
     <div id="master_footerdiv"> 
     </div> 
    </div> 
</body> 
</html>

CSS

html, body 
{ 
    margin:0px; 
    padding:0px; 
    height:100%; 
    width:100%; 
} 
#master_bodywrapper 
{ 
    margin:0px; 
    padding:0px; 
    height:100%; 
    background-color:Black; 
} 

#master_header 
{ 
    background-color:Aqua; 
    position:absolute; 
    height:100px; 
    margin:0px; 
    padding:0px; 
    left:0px; 
    top:0px; 
} 
#master_maindiv 
{ 
    background-color:Orange; 
    height:100%; 
} 
#master_logodiv 
{ 
    background-color:Blue; 
    height:50px; 
} 
#master_tabsdiv 
{ 
    background-color:Green; 
    height:50px; 
} 

#master_contentdiv 
{ 
    background-color:Yellow; 
    padding-top:100px; 
    height:100%; 
} 

#master_footerdiv 
{ 
    background-color:Purple; 
    height:20px; 
    position:relative; 
    margin-top:-20px; 
    clear:both; 
}

來源

2013-09-16 17:31:55 steventnorris

取出padding-bottom從#master_maindiv：http://jsfiddle.net/zZUUW/6/

來源

2013-09-16 17:16:05 Alvaro

這個問題是當我把高度：100％添加到#master_contentdiv它達到（該部分沒有在小提琴中完成）。我想要什麼小提琴，用黃色部分填滿整個中間部分。 – steventnorris

帶頁眉和頁腳以及100％內容的網頁div

回答

相關問題