Question

我试图创建一个包含两个DIV的HTML页面。我希望每个DIV都能覆盖所用设备的全屏。简单的例子：

<body>
<div class="foo">Some content</div>
<div class="foo">Another content</div>
</body>

我的css-File看起来像这样

html,body {
margin: 0;
padding: 0;
width: 100%;
min-width: 320px;
height: 100%;
}

.foo {
 position: relative;
 height: 100%;
 }

这样可行，但是当达到100％的屏幕高度时，第一个DIV（foo）的内容会在DIV的底部被切掉。好的，所以我尝试更改我的CSS，将身高更改为正文上的 min-height ，html 和 foo -Element。现在我知道了：这不是解决方案。

再说一遍：我希望DIV foo 的高度为100％（相对于浏览器屏幕），即使内容较少。但如果内容很长，身高 DIV foo 应该＆＃34;成长＆＃34;与内容。

Answer 1

试试这个

＆＃13;

html,body {
margin: 0;
padding: 0;
width: 100%;
min-width: 320px;
}

.foo {
 position: relative;
 width: 100%;
 }

＆＃13;

<body>
<div class="foo">Some content</div>
<div class="foo">Another content</div>
</body>

＆＃13;

Answer 2

嗯。我不知道这是否是你想要实现的目标：fiddle

我刚刚补充道：

 overflow-y:scroll;

到你的foo元素。

但是有一个双滚动条很难看，所以我隐藏了身体滚动条，只留下了一个滚动条。

如果是我的项目，我甚至会隐藏两个滚动条，因为这些天每个人都使用mause wheel。唯一的问题是让用户知道有隐藏的内容所以我会在第一个foo容器的右下角添加一个grafic元素（类似箭头向下）

Answer 3

试试这个，

HTML

<div class="foo">Some content</div>
<div class="foo">Another content</div>
<div class="foo">Another content</div>
<div class="foo">Another content</div>

CSS

html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-width: 320px;
}
.foo {
    height: 100%;
}

选中此fiddle

CSS DIV容器100％宽度，最小宽度100％（封面全屏）

3 个答案: