Html CSS DIV容器100%宽度，最小宽度100%（覆盖全屏）_Html_Css

Html CSS DIV容器100%宽度，最小宽度100%（覆盖全屏）

html css

Html CSS DIV容器100%宽度，最小宽度100%（覆盖全屏）,html,css,Html,Css,我正在尝试创建一个包含两个div的HTML页面。我希望每个DIV都能覆盖所用设备的全屏。简单的例子： <body> <div class="foo">Some content</div> <div class="foo">Another content</div> </body> 这是可行的，但是当达到100%的屏幕高度时，第一个DIV（foo）的内容在DIV的底部被切掉。好的，所以我尝试更改CSS，将主体、html和fo

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

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

这是可行的，但是当达到100%的屏幕高度时，第一个DIV（foo）的内容在DIV的底部被切掉。好的，所以我尝试更改CSS，将主体、html和foo元素上的height更改为minheight。现在我知道了：这不是解决办法

再次声明：我希望divfoo的高度为100%（相对于浏览器屏幕），即使内容较少。但如果内容较长，高度DIV foo应随内容“增长”

试试这个

html，正文{
保证金：0；
填充：0；
宽度：100%；
最小宽度：320px；
}
傅先生{
位置：相对位置；
宽度：100%；
}


一些内容
另一内容

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

我刚才补充说：

 overflow-y:scroll;

到您的foo元素

但是有一个双滚动条是很难看的，所以我把身体滚动条藏起来了，只留下foo滚动条

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

试试这个

HTML

选中此项

min height:100%和scroll auto不起作用？添加边距：0；填充：0；给.福.这很有趣。。。我开始了一个JS小提琴：它的工作。我不知道我的项目出了什么问题。我得检查一下。

 overflow-y:scroll;

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

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