HTML 페이지를 화면에 맞추는 방법?

Question

CSS로 html을 사용하는 웹 페이지를 디자인하고 있는데, 모든 페이지를 포함하고 다른 div로 구성되는 div를 만들었지 만 페이지를 실행할 때 높이가 브라우저 높이의 150 %와 같습니다.

모든 페이지 포함 사업부 :

#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

이것이 문제입니다.

내부 컨테이너의 높이가 100 %이지만 높이가 0보다 작습니다. 아래에서 지나친 오버플로가 보이는 것은 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