如何調整內容面積動態CSS和JavaScript的沒有

藍色區域時，瀏覽器窗口大小調整與重新調整。
標題是可見的。
藍色區域開始於標題結束的位置（不在標題之後或之後）。
藍色區域在頁腳前結束。
藍色區域和頁腳之間存在5個黃色像素。

這可能只有CSS和HTML（沒有任何JavaScript）？

<!doctype html> 
<html lang="en-US"> 
<head> 
    <meta charset="utf-8"/> 
    <title>Test</title> 

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/> 
    <style> 

    *{ 
     margin:0px; 
     padding:0px; 
    } 

    header, nav, article, footer, address { 
     display: block; 
    } 

    header{ 
     position:relative; height: 50px; background-color:#2b2b2b; 
    } 

    footer{ 
     height: 50px; 
     width:100%; 
     bottom: 0px; 
     position: fixed; 
     background: red; 
    } 

    #explorer{ 
     position:relative; bottom:55px; 
    } 

    #sections{ 
     width: 100%; height: 100%; bottom: 55px; position:fixed; background: blue; 
    } 

    </style> 
</head> 

<body style="background-color:yellow"> 
    <header > 
     <h1>Test</h1> 
    </header> 
    <div id="explorer" > 
     <div id="sections" > 
    &nbsp; 
     </div> 
    </div> 
    <footer> 
     /* Footer Content */ 
    </footer> 
</body> 

</html>

來源

2011-02-18 Bonfocchi

查看CSS媒體查詢...我知道它可以在窗口大小更改時更改。 – Peter 2011-02-19 00:21:55

@Peter - 感謝您的提示，但它不能解決此問題。 – Bonfocchi 2011-02-19 01:29:23

回答過類似的問題，我認爲Kit的代碼只需要一個調整&這是我們必須刪除高度：100％從部分格&它會工作得很好。同時在測試下面的代碼時，我注意到如果我們將高度降低到極限以外，則頁腳實際上位於標題之上。儘管實際上高度永遠不會那麼小，但是您仍然可能想要將z-index：5000添加到標題標籤

來源

2011-02-19 01:31:22

是這樣的？

<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Test</title> 
    <style type="text/css"> 

    html, body, h1 { 
     margin:0px; 
     padding:0px; 
    } 

    header, nav, article, section, footer, address { 
     display: block; 
    } 

    header { 
     position:relative; 
     height: 50px; 
     width: 100%; 
     background-color:#2b2b2b; 
    } 

    footer{ 
     height: 50px; 
     width:100%; 
     bottom: 0px; 
     position: fixed; 
     background: red; 
     border-top: 5px solid yellow; 
    } 

    #explorer{ 
     position:relative; bottom:55px; 
    } 

    #sections{ 
     width: 100%; 
     height: 100%; 
     bottom: 55px; 
     position:fixed; 
     top: 50px; 
     background: rgba(0,0,256,.5); 
    } 

    </style> 
</head> 
<body> 
    <header > 
     <h1>Test</h1> 
    </header> 
    <div id="explorer" > 
     <div id="sections" > 
     &nbsp; 
     </div> 
    </div> 
    <footer> 
     /* Footer Content */ 
    </footer> 
</body>

來源

2011-02-19 00:27:18

不，藍色區域必須在頁腳之前結束。 – Bonfocchi 2011-02-19 01:08:11

我只是在How to expand div to cover remaining page height

來源

2011-02-19 01:15:09 Hussein

我希望這可以做到沒有JavaScript。 :( – Bonfocchi 2011-02-19 01:28:24

如何調整內容面積動態CSS和JavaScript的沒有

回答

相關問題