使div適合初始屏幕

我想使div適合用戶屏幕的初始高度和寬度。使div適合初始屏幕

我認爲下面粗略地畫出示意圖說明這更好：

enter image description here

#div 
{ 
width: 100%; 
height: 100%; 
}

似乎並沒有工作

來源

2011-06-08 jonnnnnnnnnie

至少有一百個類似的問題已經在SO ... – Shad 2011-06-08 22:40:57

如果我理解正確的話（有一些造成混亂這裏）：

http://jsfiddle.net/zRpNp/

#screenFiller { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0; 
    border: 15px solid orange 
}

您可能是position: fixed版本之後：http://jsfiddle.net/zRpNp/1/

來源

2011-06-08 22:45:12 thirtydot

是的，它的工作原理！但是，你認爲它可以在IE8 + – jonnnnnnnnnie 2011-06-08 22:48:27

的所有瀏覽器上運行。 – thirtydot 2011-06-08 22:49:01

謝謝，確認：http：//browsershots.org/http://jsfiddle.net/zRpNp/ – jonnnnnnnnnie 2011-06-08 22:51:56

在一個div的高度設置爲100％只意味着你的DIV將填充100％的容器;不是100％的網頁。

我會建議你要麼需要使用一個最小高度聲明你的股利或它的容器或使用JavaScript來找到用戶的屏幕的初始高度（因爲每個人都會有一些略有不同），並設置爲在你的div上的內聯樣式。

代碼的東西沿着以下的線將返回屏幕尺寸：

var x,y; 
if (self.innerHeight) // all except Explorer 
{ 
    x = self.innerWidth; 
    y = self.innerHeight; 
} 
else if (document.documentElement && document.documentElement.clientHeight) 
// Explorer 6 Strict Mode 
{ 
    x = document.documentElement.clientWidth; 
    y = document.documentElement.clientHeight; 
} 
else if (document.body) // other Explorers 
{ 
    x = document.body.clientWidth; 
    y = document.body.clientHeight; 
}

來源

2011-06-08 22:42:37

+1用於識別height = 100％是相對於必須明確設置的父容器。 -1沒有使用純CSS解決方案，使用位置屬性來設置所有4條邊，如同十三點一樣。 – 2011-06-08 23:14:41

<html><body style="margin: 0;"> 
<div style="height: 100%; width: 100%; background: #ccc;">a</div> 
<div style="background: #777;height: 100%; width: 100%">b</div> 
</body> 
</html>

作品對我來說

來源

2011-06-08 22:43:47 Ascherer

你可以用CSS也完全做到這一點：

html, body { 
    margin: 0; 
    padding: 0; 
    min-height: 100%; 
    width: 100%; 
} 

div { 
    height: 100%; 
    width: 100%; 
}

來源

2011-06-08 22:44:32 Jordan

你的CSS風格是尋找id="div"不是一個div標籤。這應該假設你的DIV由<body>或另一個100％，100％，html元素父：

<div id="fullViewPort"> 
    My Content 
</div> 

#fullViewPort { 
    width: 100%; 
    height: 100%; 
}

來源

2011-06-08 22:44:44

<style> 
    body { 
     margin:0; 
     padding:0; 
    } 
    #try {  
     height:100%; 
     width:100%; 
     margin:0; 
     padding:0; 
     clear:both; 
    } 
    #next { 
     height:10%; 
    } 
    </style> 

    <body> 
    <div id="try">hello1</div> 
    <div id="next">hello2</div> 
</body>

適合我。

來源

2011-06-08 22:52:00 Phphelp

另一種方式僅適用於CSS來做到這一點...

http://jsfiddle.net/pxfunc/qQ45K/

html, body {height:100%;} /* explicitly set html & body height */ 

#fillScreen { 
    position:relative; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
}

來源

2011-06-08 22:56:19 MikeM

我認爲這是最簡單的方法......通過讓瀏覽器告訴他高度...使用Java腳本

<html> 
<head> 
<title>viewport</title> 
<style type="text/css"> 
    * { padding:0; margin:0; } 
    #test { background:#aaa; height:100%; width:100%; } 
</style> 
<script type="text/javascript"> 
    window.onload = function() { 
    var height = getViewportHeight(); 
    alert("This is what it looks like before the Javascript. Click OK to set the   height."); 
    if(height > 0) 
     document.getElementById("test").style.height = height + "px"; 
    } 
    function getViewportHeight() { 
    var h = 0; 
    if(self.innerHeight) 
     h = window.innerHeight; 
    else if(document.documentElement && document.documentElement.clientHeight) 
     h = document.documentElement.clientHeight; 
    else if(document.body) 
     h = document.body.clientHeight; 
    return h; 
    } 
</script> 
</head> 
<body> 
    <div id="test"> 
    <h1>Test</h1> 
    </div> 
    </body> 
</html>`

來源

2014-01-26 09:46:29

個人而言，我喜歡純CS S解決方案。只需使用vh單元。

#filldiv 
{ 
    height: 100vh; 
}

這將使div填充瀏覽器窗口的高度。

另外，您還可以使其填充瀏覽器窗口的寬度，這隻使用vw單位。

#filldiv 
{ 
    width: 100vw; 
}

兩者都顯示在this fiddle

我個人很喜歡這兩個單位的，因爲它們可以用於東西，如字體大小動態調整。

來源

2014-12-14 05:08:13 Tinfoilboy

你會如何做寬度而不是高度？ – 2015-10-11 18:25:30

@GmanSmith我會很快更新答案。 – Tinfoilboy 2015-10-11 18:48:57

@Tinfoilboy這真的很高雅！你知道它在不受支持的瀏覽器中如何破解嗎？ – Dionysis 2016-02-23 22:32:14

使div適合初始屏幕

回答

相關問題