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

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>

这是附带的 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;
}

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

我发现 this website 有一个教程。即使我按照教程操作，我也无法将高度设置为 100%。请让我知道我的错误在哪里。我才开始学习这个就一周了，这让我发疯了。我尝试搜索答案，但找不到可以解决我的查询的答案。感谢您的帮助，如果这不应该出现在这里或者它太基础了，我们深表歉意。

Answer 1

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

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

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

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

height:100% does not work when using Semantic-UI

html

css

semantic-ui