如何讓HTML頁面適合屏幕？

我設計使用帶CSS的HTML網頁，我做了一個包含所有頁面，包括其他的div（像往常一樣）一個div，但在運行頁面時，它的高度是一樣的瀏覽器高度的150％：如何讓HTML頁面適合屏幕？

，幷包含所有頁面的DIV：

#items { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    left: 0px; 
    top: 0px; 
}

和html代碼：

<div id="items"> 
<select id="heap" class="basic-example"></select> 
<img src="img/bg.png" class="responsive-image"> 

<div id="dummy"></div> 

<div id="gallery"> 

</div> 

    <span id="order_list"> 
    <img src="img/ItemList.png" class="responsive-image"> 
<div id="confirm" class="buttonClass"> 
    <div align="center">Confirm</div> 
</div>  

<div id="total" class="totalClass"> 
    <div align="center"></div> 
</div> 
    </span> 

</div>

來源

2013-12-21 MRefaat

設置HTML，身體{寬度：100％;高度：100％;餘量：0;填充：0}並對其進行測試。 –

CSS和HTML的那一部分的只有這一塊，這是完全不可能瞭解什麼讓你的頁面大於希望。你能提供一個現場演示嗎？ –

你可以做一個jsfiddle演示嗎？也許增加框大小：邊框;將有所幫助。 –

這是你的問題：

你必須使內部容器定位低於0，但100％的高度。你看到overfloding下面是你的位置頂部35px的35px。

#items { 
    position: absolute; 
    width: 100%; 
    /*height: 100%;*/ /* removed */ 
    bottom:0; /* added */ 
    z-index: 1; 
    left: 0px; 
    top: 0px; 
} 
#gallery { 
    position: absolute; 
    width: 75%; 
    /*height: 100%;*/ /* removed */ 
    bottom:0; /* added */ 
    z-index: 1; 
    top: 35px; 
} 
#order_list { 
    position: absolute; 
    width: 25%; 
    /*height: 100%;*/ /* removed */ 
    bottom:0; /* added */ 
    z-index: 2; 
    left: 75%; 
    top: 35px; 
    color: #F33; 
    background:url(img/ItemList.png) display: inline-block; 
    alignment-adjust: central; 
    font: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-size-adjust: inherit; 
    grid-rows: inherit; 
    list-style: upper-alpha; 
    word-spacing: inherit; 
    word-wrap: break-word; 
    vertical-align: central; 
}

You jsfiddle with height:100%; removed and bottom:0; added

來源

2013-12-22 01:51:14

我做您的修改，但仍是同樣的問題 – MRefaat

浩，我看你想要的不僅僅是一個'這是你的問題，這裏是如何解決這個問題的回答。我寫了我的答案，以符合您提供的代碼。你現在知道你的情況是由絕對定位元素低於top引起的：0。你只需要檢查你的CSS的其餘部分，就可以完成這項工作。你不是嗎？ –

在這裏，我與我在我的回答解釋更新你的jsfiddle。 –

如何讓HTML頁面適合屏幕？

回答

相關問題