Question

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

<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;
}

这是我的代码。我有一个使用语义UI制作的HTML。我有一个语义菜单，然后我有一个有标题的div。我希望该div占据我屏幕高度的100％。只有滚动时才会显示第二个div。

我遇到了this website，其中有一个教程。即使我按照教程，我也无法将高度设置为100％。请让我知道我的错误在哪里。我刚刚开始学习这一周，这让我疯狂。我试着寻找答案，但找不到能解决我问题的答案。感谢您的帮助和对不起，如果这不是在这里或太基本。

Answer 1

1。）#top-section元素的父级是.pusher，没有定义的高度。添加100％的高度。

2.。）您为.top-section定义了100％的高度，但作为ID，#firstDiv（没有定义的高度）会否决它，所以也要加上100％的高度。

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

高度：100％在使用Semantic-UI时不起作用

1 个答案: