div不会扩展到所有显示器尺寸的百分比

时间:2013-02-22 17:06:34

标签: css html responsive-design

我有一个

container:100%
contentcontainer:90%

然后在里面我有

#bookinfo{width:75%; float:left;}
sidebar{width:20%; float:right;}

#bookinfo div包含具有这些样式的书籍

display inline 
width:320px
height:430px
float:left
margin right:15px

我认为将bookinfo设置为75%的宽度会使其对所有显示器尺寸做出响应,但是在一台显示器上我得到三本书紧贴侧边栏而另一台显示器我得到三本书带有一大片书和侧边栏之间。当使用萤火虫时,我看到75%没有到达较大显示器上的侧边栏,就像在较小的显示器上一样。

我已尝试将bookinfo div设置为像素值,但在所有显示器上仍然不会呈现相同的值。我只是希望尽可能多的书适合显示器允许。那么我做错了什么?

解决

通过完全删除contentcontainer,将container设置为max-width:90%并从#bookinfo移除宽度以支持添加,我可以在所有显示器上获得相同的外观padding-right。这很有效。希望它可以帮助别人。

1 个答案:

答案 0 :(得分:1)

您还需要添加

html, body{width:100%; height:100%}