Question

我已经获得了一些带有CSS的HTML，实际上这是：

<html>
  <head>
    <title>{Title}</title>
  </head>
  <style>
  html {
      background-image: url('http://i.imgur.com/9sVraBS.jpg');
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  header {
      width: 100%;
      height: 100%;
      position: relative;
      background-image: url('http://i.imgur.com/5RVc2sw.png');
  }
  h1 {
      font-family: 'Montserrat', 'Helvetica Neue', "Arial", sans-serif;
  }
  #title {
      margin: auto;
      display: inline-block;
      width: 100%;
      text-align: center;
  }
  #navigation {
      display: inline-block;
  }
  </style>
  <body>
    <header>
      <div id='navigation'>
        <a href='/art'>Art</a><br><br>
        <a href='/music'>Music</a>
      </div>
      <div id='title'>
        <h1>{Title}</h1>
        {block:Description}
            {MetaDescription}
        {block:Description}
      </div>
    </header>
  </body>
</html>

在我在浏览器中测试时看起来像这样：

这是我的意图，但是当我在tumblr＆＃39;编辑html＆＃39;中复制并粘贴完全相同的代码时，我得到了这个：

标题div未遵循指定的＆＃39;高度：100％＆＃39;内容完成后被缩短。

我不明白自从我的版本工作正常以来发生了什么，但完全相同并不适用于tumblr。我需要指定一些特殊的东西来使div高度达到100％吗？

Answer 1

这是来自浏览器样式表的body的默认边距。

添加到您的CSS

body { margin: 0}

参考：Default Browser Styles

Answer 2

<html>
  <head>
    <title>{Title}</title>
  </head>
  <style>
    body{ margin:0px}
  html {
      background-image: url('http://i.imgur.com/9sVraBS.jpg');
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  header {
      width: 100%;
      height: 100%;
      position: relative;
      background-image: url('http://i.imgur.com/5RVc2sw.png');
  }
  h1 {
      font-family: 'Montserrat', 'Helvetica Neue', "Arial", sans-serif;
  }
  #title {
      margin: auto;
      display: inline-block;
      width: 100%;
      text-align: center;
  }
  #navigation {
      display: inline-block;
  }
  </style>
  <body>
    <header>
      <div id='navigation'>
        <a href='/art'>Art</a><br><br>
        <a href='/music'>Music</a>
      </div>
      <div id='title'>
        <h1>{Title}</h1>
        {block:Description}
            {MetaDescription}
        {block:Description}
      </div>
    </header>
  </body>
</html>

tumblr div高度上的html表现不佳

2 个答案: