Как сделать HTML-страницу подходящей для экрана?

Question

Я разрабатываю веб-страницу с помощью html с css, я создал div, содержащий всю страницу, и состоит из других div (как обычно), но при запуске страницы высота равна 150% от высоты браузера:

и 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> 

Answer 1

Это ваша проблема:

У вас есть внутренние контейнеры, расположенные ниже 0, но со 100% высотой. То, что вы видите, переполняется под 35px с вашей позиции top: 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