2013-07-15 158 views
1

我为我的页面构建了一个标题栏。它由元素组成,内部是一些元素,,。我可以很好地放置所有东西,但是当我调整浏览器窗口的大小时,所有内容都开始移动并重叠在标题中。给头,甚至身体固定与像“宽度:1000px”解决了这一问题,但这是屏幕尺寸相关。在调整窗口大小时停止元素移动

如何获取我的页面,以便浏览器窗口的任何大小调整都会导致滚动条出现以查看隐藏的内容,并且这不会依赖像素中的硬连线分辨率。

+0

使用响应式设计模式,例如'twitter-bootstrap'检查此http://twitter.github.io/bootstrap/ –

回答

6

给你的主div(通常是你的包装div)一个min-width: ...px

像这样:

<div class="wrap"> 
    <div class="header">...</div> 
    <div class="content">...</div> 
</div> 

.wrap { 
    width: 95%; 
    min-width: 900px; 
} 

在上面的例子中,包装的div将总是至少900px。 当窗口被调整为更小的宽度时,将出现滚动条。

如果屏幕大于900px,则div的宽度将为95%。

+0

谢谢,我会试试这个。在相关的问题上,我是否应该将标题封装在div中,还是可以直接在标题上使用这些样式? – Amoeba

+0

是的,你也可以在你的标题上使用它。请注意,这取决于您的网站结构是如何构建的。将它全部包装在一个包装div中可能会更好。 – LinkinTED

+0

如果它适合你,请不要忘记标记答案为解决方案。 – LinkinTED

相关问题