设置html,body,#app大小的最佳方式是什么？
我们在使用框架的时候，往往我们的内容会被包含在#app中。
当我们的内容包含在body中的时候，我往往会这样设置html, body的大小。
极客观点
项目管理
HarmonyOS
html{
block-size: 100%;
}
body {
min-block-size: 100%;
}当有了#app时，该怎么设置合适呢?这样吗?
html{
block-size: 100%;
}
body {
block-size: 100%;
}
#app {
min-block-size: 100%;
}以下是一个在 HTML、body 和 #app 元素中设置最佳大小以适配内容的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#app {
min-height: 100%;
width: 100%;
box-sizing: border-box;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<!-- 这里添加您的内容 -->
</div>
</body>
</html>在上述代码中，html 和 body 的高度都被设置为 100% 以填满整个浏览器窗口。#app 元素的最小高度为 100% ，宽度为 100% ，并通过 box-sizing: border-box 和内边距来适应内容。您可以根据实际需求调整内边距和其他样式。
3 回答5.1k 阅读✓ 已解决
5 回答2k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
3 回答2.4k 阅读
4 回答2.2k 阅读
3 回答2.1k 阅读
直接使用
width: 100vw; height:100vh不行吗？如果可能考虑到移动端的浏览器地址栏和工具栏遮住一部分的问题，可以考虑使用
width: 100dvw; height: 100dvh不过我们一般也不会去设置
#app的宽高吧，宽度就是块级布局的默认100%高度则按照内容自动。除了一些限制显示区域的管理后台或者一些特殊的需求，才会考虑说限制布局的高度在指定区域内滚动。
所以可能把你想要实现的具体目的描述一下？为了实现什么，如果单纯为了限制
#app的高度那么就用vh/dvh这种基于 Viewport 单位就好了