我有一个宽度为100%的流动布局网页。
当我调整浏览器窗口大小时,页面中的元素会重叠。
我想创建一个类似于这个网站 http://bologna.bakeca.it/ 的效果,即当窗口小于固定宽度时停止调整大小。
我有一个宽度为100%的流动布局网页。
当我调整浏览器窗口大小时,页面中的元素会重叠。
我想创建一个类似于这个网站 http://bologna.bakeca.it/ 的效果,即当窗口小于固定宽度时停止调整大小。
你可以为body标签设置CSS的min-width属性。由于IE6不支持该属性,因此可以这样编写:
body{
min-width:1000px; /* Suppose you want minimum width of 1000px */
width: auto !important; /* Firefox will set width as auto */
width:1000px; /* As IE6 ignores !important it will set width as 1000px; */
}
或者:
body{
min-width:1000px; // Suppose you want minimum width of 1000px
_width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}
好的,你已经给出了答案。在你的CSS中给包含元素设置一个最小宽度。如果你需要支持IE6,可以使用min-width-trick:
#container {
min-width:800px;
width: auto !important;
width:800px;
}
这将在IE6和任何最新的浏览器中有效地给您800像素的最小宽度。
@media
查看@media
CSS规则。
您可以使用@media screen and (max-width: ...px)
和@media screen and (max-height: ...px)
来设置您html组件的宽度,以保持页面始终处于您选择的值。之后,如果您希望用户可以访问您网页上遮挡的内容,则设置overflow:auto
。
您不能防止用户将浏览器调整为小于这些值,但是您的网页永远不会低于您选择的值。
例如,对于最小宽度= 330px和最小高度= 400px,CSS可能如下所示:
body{
width: 100%;
height: 100%;
}
@media screen and (max-width: 330px){
html{
width: 330px;
overflow: auto;
}
}
@media screen and (max-height: 400px){
html{
height: 400px;
overflow: auto;
}
}