我不知道该如何描述它，不是全屏显示，而是填满整个视口。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1001001</title>
<style id="style-tag"></style>
<script src="dist/app.js"></script>
</head>
<body spellcheck="false">
<div id="content">
<pre contenteditable id="style-text"></pre>
</div>
<div id="footer">
<a href="#" id="skip-animation">Skip</a>
</div>
</body>
</html>
CSS：
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
pre {
overflow: auto;
min-height: 100%;
width: 100%;
border-radius: 1px; /* Prevents bad clipping in Chrome. */
}
#content {
position: absolute;
top: 0; right: 0; left: 0; bottom: 20px;
}
#footer {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
padding: 0 10px;
}
预期结果：
彩色块填满了整个屏幕（我要求这是一个，因为随后添加了文本）。
实际结果：
视口几乎被该块覆盖，但是在顶部和底部，大约有10像素未着色。
最佳答案
如果在min-height元素上将css min-height:100vh;属性设置为<pre>（而不是100％），则应通过将元素的高度强制为至少整个视口高度来解决您的问题。
编辑-还将margin:0;添加到<pre>元素的样式。这似乎对我有用。
希望这可以帮助！ - 詹姆士。
关于html - 我可以制作“全屏” <pre>，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46673707/