Question

所以我正在努力练习HTML和CSS，尝试开始构建一些技能。我正在努力创建一个“博客”网站的简单布局，其中包含顶部导航，具有左侧和右侧的主体以及页脚。目前它显示了我想要的方式，但是当我查看检查器并将鼠标悬停在body标签上以查看它的轮廓时，它显示的高度仅为20px，并且它不会像通常那样占据整个页面。

（我也注意到它也在为我的“身体内容”课程做这件事，当它悬停在“身体上”时，它不应该勾勒出“主要内容”和“右侧内容”。内容“在检查员？

我担心这指出了一个我没有注意到的错误，可能会对未来的造型产生影响。

我包含了html和我的样式表

body {
  width: 80%;
  margin: 0 auto;
}
.body-content {
  display: inline;
  width: 100%;
}
.main-content {
  display: inline-block;
  float: left;
  width: 50%;
}
.main-content p {
  text-align: left;
}
.right-side-content {
  display: inline-block;
  margin-top: 50px;
  float: right;
  width: 20%;
}
.right-side-content p {
  text-align: center;
}
.bottom-content {
  width: 100%;
  float: left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
  <title>The Dudest Blog Around Man</title>
  <link rel='stylesheet' href='css/styles.css' />
</head>

<body>
  <div class='core'>
    <div class='top-content'>
      <div id='site-banner'>
      </div>
      <div class='navigation-area'>
        <nav id='main-navigation'>
          <a href='#'>Home</a>
          <a href='#'>Bands</a>
          <a href='#'>Reviews</a>
          <a href='#'>Contact</a>
        </nav>
      </div>
    </div>
    <div class='body-content'>
      <div class='main-content'>
        <article class='article'>
          <h1 class='article-title'>Post Apocalyptic Decline</h1>
          <h6 class='article-creation-date'>4/14/14 12:51pm</h6>
          <p class='article-main-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
            metus varius laoreet.</p>
        </article>
        <article>
          <h1 class='article-title'>Can We Recover?</h1>
          <h6 class='article-creation-date'>4/14/14 12:51pm</h6>
          <p class='article-main-content'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
            pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.
            Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut
            metus varius laoreet.</p>
        </article>
      </div>
      <div class='right-side-content'>
        <div class='current-give-away'>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit,</p>
        </div>
        <div class='next-week-on'>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
            quia voluptas sit aspernatur aut odit aut fugit,</p>
        </div>
      </div>
    </div>
    <div class='bottom-content'>
      <footer id='footer'>
        <a href='#'>Legal</a>
        <a href='#'>Contribute</a>
        <p id='copyright'>Copyright 2014 EW</p>
      </footer>
    </div>
    </dvi>
</body>

</html>

Answer 1

body标记并不一定会自动填充屏幕 - 它会根据所包含的内容自行调整大小，除非您明确调整其大小。

如果您想要拉伸整个屏幕，请将以下内容添加到CSS：

html {
  height: 100%;
}

body {
  height: 100%;
}

选择body标记后元素未突出显示的原因是因为您正在使用display: inline和display: inline-block更改有关渲染的规则以及浏览器的内容认为属于哪里： - ）

Chrome检查器未正确显示正文轮廓

1 个答案: