CODEWITHSUNDEEP
htmlcss
MRefaat
MRefaat

Reputation: 535

How to make HTML page fits the screen?

I'm designing a web page using html with css, i made a div that contains all the page and consists of the other divs(as usual), but when running the page it's height is like 150% of the browser height :

enter image description here

and the div that contains all the page:

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

and the html code :

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

Upvotes: 0

Views: 107

Answers (1)

Milche Patern
Milche Patern

Reputation: 20442

This is your problem :

You have inner containers positioned lower than 0 but with 100% height. What you see overfloding under is 35px from your position 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

Upvotes: 2

Related Questions