Question

I don't know how else to describe it, not fullscreen, but fill up the whole viewport.

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;
}

Expected outcome: The coloured block fills the entire screen (I require this to be a as text is added afterwards).

Actual outcome: Viewport is almost covered by the block, however, on the top and bottom, there is about 10px that are not coloured.

Answer 1

如果您在min-height元素上将css min-height:100vh;属性设置为<pre>（而不是100％），那么应通过强制解决您的问题元素的高度至少为整个视口高度。

修改 - 同时将margin:0;添加到<pre>元素的样式中。这似乎对我有用。

希望这有帮助！ - 詹姆斯。

我可以制作一个全屏＆＃34; <pre>

1 个答案: