最小尺寸的全屏CSS

时间:2011-12-18 21:59:45

标签: html css

我用CSS / HTML创建了一个布局,结构如下:

structure

页脚中的导航水平滚动内容以显示两个不同的屏幕。屏幕内容是固定的高度和垂直居中,布局总是填满整个窗口。

因为我的内容具有固定的高度,所以当窗口达到一定高度时,我需要浏览器显示垂直滚动条。

我还有一些position:fixed <canvas>个叠加层,这些叠加层会被设置为<html>的{​​{1}}和<body>元素裁剪掉。

我希望通过在height:100%; width:100%选择器上设置min-height:700px,我可以在窗口太短时显示滚动条。这似乎不起作用。

如何使此网站全屏显示,但在低于最小尺寸阈值时滚动?

2 个答案:

答案 0 :(得分:0)

那么,这应该有效地确保body总是至少700px。但是,position: fixed仍会将它们锚定到视口的底部,因此您基本上只会滚动背景。我相信你想要页眉/页脚栏贴在顶部和底部,这样你总能看到它们之间的完整内容?

那么,像这个小提琴这样的东西会更像你正在寻找的东西吗? http://jsfiddle.net/jblasco/qPB9k/8/

它使用包含div的包装min-height,并使用绝对定位的条形图。

答案 1 :(得分:0)

试试这个:overflow-x: auto;

一旦内容超过其容器的大小,它将尝试放置水平滚动条。