完整的html div截斷頂部

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: 0;刪除其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 個解決方案

解決方案1
3 已采納 2016-03-08 22:45:52

解決方案2
0 2016-03-08 22:45:01

解決方案3
0 2016-03-08 22:46:35

解決方案4
0 2016-03-08 22:50:56

完整的html div截斷頂部

問題描述

4 個解決方案

解決方案1 3 已采納 2016-03-08 22:45:52

解決方案2 0 2016-03-08 22:45:01

解決方案3 0 2016-03-08 22:46:35

解決方案4 0 2016-03-08 22:50:56

解決方案1
3 已采納 2016-03-08 22:45:52

解決方案2
0 2016-03-08 22:45:01

解決方案3
0 2016-03-08 22:46:35

解決方案4
0 2016-03-08 22:50:56