網頁空間的高度設定問題

幾種現代流行的網頁風格中,其中一種是以螢幕高度為依據的區塊設計,例如工作室今年稍早的課程介紹頁:


其中每一個區塊均填滿了整個螢幕畫面,點選右邊的導覽可以捲動至對應的區塊,要達到這種效果,必須同時將區塊的width 與 height 設定為 100% ,可以讓網頁中的區塊畫面填滿整個螢幕空間並且隨著螢幕大小動態縮放,考慮以下的HTML配置:

<body>
    <div>HTML5</div>
    <div>CSS</div>
    <div>JavaScript </div>
    <div>API</div>
</body>

接下來設定CSS以呈現 HTML 的外觀:

<style>
div{
    width:100% ;
    height:100%;
    color:silver;
    font-size:4em;
}
div:nth-child(2n+1){
    background-color:black;
}
    div:nth-child(2n) {
        background-color: gray;
    }
</style >

這一段 CSS 會呈現以下的結果:



如你所見,width 的確是 100% 的寬度,但 height 並沒有作用,這問題出在div之類的塊級元素高度會依其上層容器為基準呈現,因此必須將其上層元素同步設定為 100%,除了 body 之外,html 亦需一併設定如下:

html,body{
    height:100%;
}

再一次檢視網頁,這一次可以看到每一個div元素都填滿了螢幕畫面,移動右邊的捲軸可以看到其它的區塊內容。



沒有留言: