gpt4 book ai didi

html - CSS DIV 容器 100% 宽度,最小宽度 100%(覆盖全屏)

转载 作者:行者123 更新时间:2023-11-28 08:23:49 27 4
gpt4 key购买 nike

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

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

我的 css 文件是这样的

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

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

这可行,但是当达到屏幕高度的 100% 时,第一个 DIV (foo) 的内容在 DIV 的底部被截断。好的,所以我尝试更改我的 CSS,在 body 上将 height 更改为 min-height ,htmlfoo 元素。现在我知道:这不是解决方案。

同样:我希望 DIV foo 的高度为 100%(相对于浏览器屏幕),即使内容较少。但在内容较长的情况下,高度 DIV foo 应该随着内容“增长”。

最佳答案

试试这个

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

.foo {
position: relative;
width: 100%;
}
<body>
<div class="foo">Some content</div>
<div class="foo">Another content</div>
</body>

关于html - CSS DIV 容器 100% 宽度,最小宽度 100%(覆盖全屏),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28627396/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com