如何让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页面适合屏幕？

回答

相关问题