Html div没有被定位

时间:2014-11-19 17:07:23

标签: html css

我正在开展一个小项目,仅仅是为了我自己的乐趣。我在html页面的顶部创建了一个导航栏,我使用了一些css使它看起来更漂亮。

这是html

<html>
<head>
      <title> Website </title>
      <style type="text/css">
          body {
          margin: 0;
          background: #F2F2F2;
          }
          .navbar {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 45px;
          background: #12B0CD;
          position:fixed;
          }
          #navbar-logo {
          font-family:'Lato', Arial;
          font-size: 35px;
          color: white;
          border: none;
          background: #12B0CD;
          }
          .content {
          top: 50px;
          margin: none;
          width: 100%;
          height: 50%;
          z-index: -1;
          }
      </style>
</head>
<body>
       <div class="navbar">
              <div id="navbar-logo">
                     <button id="navbar-logo">Fancy Name </button>
              </div>
       </div>
       <div class="content">
              <div id="content-box">
              </div>
       </div>

</body>
</html>

如果你把它弹入记事本并在浏览器中打开它,你会发现课程内容没有显示,我不知道为什么。我需要帮助。在普通代码中,我使用样式表,我不知道这是否会改变任何东西。

1 个答案:

答案 0 :(得分:1)

由于您的内容框为空,并且您正在使用百分比,因此该框需要其父级(正文)具有高度。如果您在身上设置了width:100%;height:100%;,则应该会看到该框。