使用 Semantic-UI 时 height:100% 不起作用

Question

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
</head>

<body>
  <div class="ui secondary pointing menu" id="menu">
    <a class="active item">Home</a>
    <a class="item" href="/tests">Tests</a>
    <a class="item">About us</a>
  </div>

  <div class="pusher">
    <div class="ui vertical center aligned segment top-section" id="firstDiv">

      <div class="ui container">
        <div class="ui text container">
          <h1 class="ui header">Heading</h1>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

这是随附的 CSS：

html {
  height: 100%;
}

body {
  height: 100%;
}

.top-section {
  height: 100%;
}

#menu {
  background: #CFCFCF;
}

#menu a {
  color: black;
}

#firstDiv {
  background: #CFCFCF;
  width: 100%;
  margin-top: -1em;
}

Run Code Online (Sandbox Code Playgroud)

这是我的代码。我有一个使用 Semantic UI 制作的 HTML。我有一个语义菜单，然后有一个带有标题的 div。我希望该 div 占据屏幕 100% 的高度。将有第二个 div，仅在滚动时才可见。

我发现这个网站有一个教程。尽管我按照教程进行操作，但我无法将高度设置为 100%。请让我知道我的错误在哪里。我刚开始学习这个一周，这让我发疯。我尝试寻找答案，但找不到可以解决我的查询的答案。感谢您的帮助，如果这不是本意的或者它太基础了，我们深表歉意。

Answer 1

Joh*_*nes 3

1.) 元素的父元素#top-section是.pusher，它没有定义高度。添加 100% 高度。

2.) 您为定义了 100% 高度.top-section，但作为 ID #firstDiv（没有定义高度）将否决这一点，因此也为其添加 100% 高度。

http://codepen.io/anon/pen/pbbQNJ

归档时间：	9 年，6 月前
查看次数：	9769 次
最近记录：	9 年，6 月前