Question

我有一个div，我想占据整个视野高度，看起来顶部正在切断。

这是html代码：

<body>
    <div id="backdiv">
        <h1>Index</h1>
    </div id="backdiv">
<body>

和css：

#backdiv {
    margin: 0px
    padding: 0px;
    height: 100vh;
    background: linear-gradient(to right bottom, #648880, #293f50);
}

当我将它加载到chrome时，它似乎并没有一直到顶部，这是一张图片：

有谁知道我怎么能改变它一直到顶部？

Answer 1

这是<h1>尝试使用margin删除margin: 0;。否则，您可以通过添加#backdiv {overflow: auto;}来强制执行新的块格式设置上下文

body, html {
  margin: 0;
  padding: 0;
}

#backdiv {
    margin: 0px
    padding: 0px;
    height: 100vh;
    background: linear-gradient(to right bottom, #648880, #293f50);
    overflow: auto;
}

<body>
    <div id="backdiv">
        <h1>Index</h1>
    </div>
<body>

Answer 2

您是否已完成此操作以删除html和body上的所有填充？此外，您的<h1>不需要保证金，而您的HTML也不正确。

<强> CSS

html, body, h1 {
   margin: 0;
   padding: 0;
}

<强> HTML

  <div id="backdiv">
      <h1>Index</h1>
  </div>

Answer 3

只需查看您的代码，请尝试以下操作：

HTML：

<body>
    <div id="backdiv">
        <h1>Index</h1>
    </div>
<body>

CSS：

html, body {
    margin: 0;
    padding: 0;
}

#backdiv h1 {
    margin: 0;
}

#backdiv {
    margin: 0px;
    padding: 0px;
    height: 100vh;
    background: linear-gradient(to right bottom, #648880, #293f50);
}

Answer 4

有时，如果您没有设置，就会发生这种情况：

body {
    margin:0;
    padding: 0;
}

希望这有帮助。

顶部完整的html div切断

4 个答案: