適合的瀏覽器大小

全屏DIV我有一個DIV和CSS一個html文件是這樣的：適合的瀏覽器大小

<html> 
<head> 
    <title></title> 
    <style text="text/javascript"> 
    body { padding:0px; margin:0px; } 
    .full { background-color: yellowgreen; width: 100%; height: 100%; } 
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
    .behindMenu { height: 50px; width: 100%; } 
    .logo {width: 100%; height: 150px;} 
    .content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
<div class="content">The rest content</div> 
</body> 
</html>

菜單是固定的，behindMenu是大小相同的菜單，它的背後是菜單。然後我有全班同學的logo和div。完整的div與課程內容後。

當訪問該頁面時，我希望div的大小在瀏覽器大小的徽標和底部之間（大小）。因此，即使我調整了窗口大小，整個圖標也必須在徽標和瀏覽器大小底部之間有一個高度。向下滾動時，用戶將看到其餘的內容。

事情是這樣的：http://strobedigital.com/

這裏是提琴：http://jsfiddle.net/2963C/

來源

2013-08-07 repincln

HTML

<html> 
<head> 
    <title></title> 
    <style text="text/css"> 
    body { padding:0px; margin:0px; } 
    .full { background-color: yellowgreen; width: 100%; height: 100%; } 
    .menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
    .behindMenu { height: 50px; width: 100%; } 
    .logo {width: 100%; height: 150px;} 
    .content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
<div class="content">The rest content</div> 
</div> 
</body> 
</html>

CSS

html,body{height:100%;} 
.wrapper{min-height:100%; position:relative} 
.full{position:absolute; top:0; left:0; width:100%; height:100%;}

來源

2013-08-07 07:33:34 Anon

謝謝。這工作很好，只需一次修改。菜單，幕後和標誌必須在全格下。非常感謝你。 – repincln

如果.full下的內容高於.full，則不起作用您必須使用position：fixed; – Macbric

.full { min-height: 100%; height:auto;}

來源

2013-08-07 06:52:16 ParVathi

這不起作用... – repincln

<html> 
<head> 
    <style text="text/javascript"> 
    html,body{height:100%;} 
.wrapper{min-height:100%; position:relative} 
.full{position:absolute; left:0; width:100%; min-height:100%;} 
.menu { height: 50px; width: 100%; background-color: black; position: fixed; } 
.behindMenu { height: 50px; width: 100%; } 
.logo {width: 100%; height: 150px;} 
.content {background-color: yellow;} 
    </style> 
</head> 
<body> 
<div class="wrapper"> 
<div class="menu">Menu</div> 
<div class="behindMenu"></div> 
<div class="logo">Logo</div> 
<div class="full">Full div</div> 
</div> 
    <div class="content">The rest content</div> 
</body> 
</html>

這裏是撥弄解決方案 - http://jsfiddle.net/agrawal_rupesh/b7gwK/

來源

2013-08-07 08:08:48 Rupesh

這個解決方案不好，因爲內容並不是完整div之後。它是在那個div後面。 – repincln

有所有現代瀏覽器都支持一個簡單的解決方案。

div#full { 
    height: 100vh; 
}

唯一值得注意的例外是Android 4.3以下 - 但只在系統瀏覽器（Chrome工作正常）。

瀏覽器支持表：http://caniuse.com/viewport-units

來源

2014-05-22 11:09:53

哇！比接受的答案更好！簡單但正在做這項工作！謝謝！ –

太棒了，只是試了一下 –

** 100vh **在Android 4.3及以下版本無法運行，因爲舊的webview實現 – EpicPandaForce

不幸的是vh和vw是非常錯誤與iPhone但幾乎所有的瀏覽器（要回來的路上）是樂於做一些數學爲您提供：

html,body { 
    height:100%; 
    margin:0; 
} 

.full { 
    height: calc(100% - 50px); /* Minus menu height */ 
    min-height: calc(100% - 50px);/*for Mozilla */ 
} 

html>body .full { 
    height:auto; 
}

來源

適合的瀏覽器大小

回答

相關問題