適合網頁屏幕問題

我有段構成的網頁如下：適合網頁屏幕問題

<body id="top"> 
    <section id="nav"> 

    </section> 
    <div id="intro"> 

    </div> 
    <div id="main"> 

    </div> 
    <div id="footer"> 

    </div> 
</body>

我想伸展intro部分，以適應自動基於瀏覽器的屏幕高度的高度。

我試着CSS：

#intro {   
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    overflow:hidden; 
}

但由於某些原因，第二個div main是重疊intro部分，因爲它應該是，在intro部分後不顯示main部分。

我在這裏錯過了什麼？我應該使用jQuery獲取屏幕高度？

來源

2015-06-22 Katarzius

爲什麼要在介紹部分之後？你已經絕對定位#intro，所以它不在正常流程中。 – Quentin

你能提供所需的結構嗎？它應該在介紹部分之前嗎？ – Katarzius

也定義寬度和高度 – captainsac

要設置您介紹部分瀏覽器屏幕的高度，你可以使用vh

#intro { 
height:100vh; 
}

VH規模與屏幕

來源

2015-06-22 12:38:55

謝謝你的回答西蒙。這正是我需要的！它是否支持所有瀏覽器？ – Katarzius

@Katarzius [see here]（http://caniuse.com/#feat=viewport-units）支持 – ioums

本網站顯示對vh單元的支持。正如你可以看到IE 8和更早版本不支持它。 http://caniuse.com/#feat=viewport-units –

對於更多的瀏覽器支持的解決方案的高度，jQuery是的要走的路。

function resizeIntro(){ 
    $('#intro').height($(window).height()); 
} 
resizeIntro(); 
$(window).resize(resizeIntro);

http://jsfiddle.net/c1du9k94/1/

來源

2015-06-22 12:46:33

感謝您的快速回復，將對其進行檢查。 – Katarzius

您需要設置高度：100％的身體和HTML，那麼你應該考慮一下其他的元素，給他們一些絕對或固定位置，以防止溢出，或者您可以使用位置定位

body,html { 
    height:100% 
} 
#otherElement { 
    position: absolute  
}

#intro {   
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    overflow:hidden; 
    z-index: 10/* if needed*/ 
}

來源

2015-06-22 13:04:35 Taurus

感謝您的意見，但我認爲我會盡力完成它與高度：100vh這正是我需要的。我會嘗試檢查腳本以包含其他不兼容的瀏覽器。 – Katarzius

適合網頁屏幕問題

回答

相關問題