如何調整div到客戶端視口高度？

好吧，所以我想要一系列的div，它們是用戶瀏覽器窗口的確切寬度和高度，而不管屏幕大小如何。我可以很容易地使div水平伸展，「寬度：100％」;但我無法解決如何讓身高伸展自己。我猜測我需要使用一些javascript來判斷高度，然後再調整另一塊來調整分隔div。不幸的是，我是一個完整的JavaScript n00b，經過兩個小時的看似沒有結果的搜索，並提出了大約100個「解決方案」，這就像id得到了一樣（我確定在某些時候我可能更接近答案）：如何調整div到客戶端視口高度？

var viewportHeight = "height:" + document.documentElement.clientHeight; 

getElementById('section-1').setAttribute('style', viewportHeight); 



<div class="section" id="section-1"></div> 

<div class="section" id="section-2"></div> 

<div class="section" id="section-3"></div>

編輯： 啊我應該更清楚，即時通訊試圖有三個div的佔用整個屏幕，所以你必須向下滾動以查看每一個 - 幾乎像單獨的幻燈片。這個想法是，每個人都佔用了整個屏幕，所以你不能看到下一部分，直到你向下滾動，而不是有三個div佔據屏幕的三分之一。

來源

2013-10-05 tomtomthompson

如果你還沒有嘗試的話，你會想看看父母：通過使用CSS的方式在DOM中的元素的孩子繼承。

我想應力什麼是每個人給你JS黑客做到這一點，不僅爲您提供矯枉過正（你沒有要求一個JavaScript的解決方案，讓他們給你的！），但它的也是一種偏離標準。 HTML用於結構，CSS用於表示，而JavaScript用於行爲方面...在加載時將div設置爲視口的寬度是PRESENTATION方面，應該在CSS中完成...而不是JavaScript。如果您嘗試根據事件或用戶交互來更改寬度，那麼JavaScript是您的朋友...但現在只需使用HTML和CSS。

訣竅是大多數元素都有一個未定義的高度 - 稍後高度由元素所保持的內容定義。

如果你想'欺騙'一個元素的高度不是它想要默認的高度，你必須明確地定義它。由於你想inherit你的身高從viewport，你必須定義頂部的高度，並把它放下...

你可能會很幸運，可以避免JavaScript（不必要的）。只需使用CSS。

試着這麼做：

html, body { 
    height: 100%; 
    width: 100%; 
}

現在，當您嘗試以後設置你的div的，指定width: 100%和高度被從HTML繼承 - >體 - > DIV。

試試看看是否解決了您的問題 - 如果沒有，請將我們指向網站，pastebin或帶有代碼的SOMETHING，以便我們告訴您如何執行此操作（而您發佈的代碼是JavaScript中的嘗試，它只是代碼的一部分 - 將完整的東西發佈到服務器或像pastebin這樣的臨時站點）。

下面是一些示例代碼，我寫的（在Chromium測試）：

的HTML：

<html> 
<head> 
    <title>Test Divs at 100%</title> 
    <link rel="stylesheet" type="text/css" href="divtest.css" 
</head> 
<body> 
<div class="test1">aef</div> 
<div class="test2">aef</div> 
<div class="test3">aef</div> 
</body> 
</html>

的CSS：

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

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

.test1 { 
    background-color: #E3C42E; 
} 

.test2 { 
    background-color: #B42626; 
} 

.test3 { 
    background-color: #19D443 
}

來源

2013-10-05 04:10:34

似乎也沒有工作，繼承人我有什麼http://jsfiddle.net/vsSSZ/ – tomtomthompson

這裏http://jsfiddle.net/vsSSZ/2/。對不起，我忘了給第一個例子（你使用的和你的JSFiddle）添加分號。它現在工作得很好。 –

啊哈現在我覺得很蠢，謝謝雖然:) – tomtomthompson

這是一個無腳本解決方案，只是CSS。這假定div直接位於body元素中，或者父母的位置是絕對的，而父代沒有填充。

#section-1 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    background: #ff0000; 
} 

#section-2 { 
    position: absolute; 
    width: 100%; 
    top: 100%; 
    height: 100%; 
    background: #00ff00; 
} 

#section-3 { 
    position: absolute; 
    width: 100%; 
    top: 200%; 
    height: 100%; 
    background: #0000ff; 
}

見琴：http://jsfiddle.net/QtvU5/1/

來源

2013-10-05 04:09:10

啊我應該已經更清楚了，我試圖讓所有三個div都佔據整個屏幕，所以你必須向下滾動才能看到每一個 - 就像分開的幻燈片一樣。這個想法是，每個人都佔用了整個屏幕，所以你不能看到下一部分，直到你向下滾動，而不是有三個div佔據屏幕的三分之一。 – tomtomthompson

@tomtomthompson啊......那作品幾乎一樣。請參閱編輯的CSS和小提琴。 –

的jQuery的一點應該這樣做：

$(document).ready(function() { 
    var window_height = $(window).height(); 
    $('#section-1").height(window_height); 
});

如果你想要t Ø保持對窗口大小調整100％高度：

$(document).ready(function() { 

    function viewport_height() { 
     var window_height = $(window).height(); 
     $('#section-1").height(window_height); 
    } 

    viewport_height(); 

    $(window).resize(function() { 
     viewport_height(); 
    }); 

});

來源

2013-10-05 04:21:50

嗨，感謝您的建議，但它似乎並沒有爲我工作我必須執行它錯了嗎？我只是把它放在頭部的前添加此代碼 –

試試這個

window.onload = init; 
function init() 
{ 
var viewportHeight = "height:" + document.documentElement.clientHeight+"px;"; 
document.getElementById('section-1').setAttribute('style', viewportHeight); 

}

來源

2013-10-05 04:27:34 Bala

試試這個

div#welcome { 
 
    height: 100vh; 
 
    background: black; 
 
    color: white; 
 
} 
 
div#projects { 
 
    height: 100vh; 
 
    background: yellow; 
 
}

<div id="welcome"> 
 
    your content on screen 1 
 
</div> 
 

 
<div id="projects"> 
 
    your content on screen 2 
 
</div>

它應該爲你工作，但很少支持IE

來源

2016-09-22 06:58:56 Jason

如何調整div到客戶端視口高度？

回答

相關問題