logo标签列表

使用Semantic-UI时，height:100%无法正常工作

htmlcsssemantic-ui
5

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

这是我的代码。我有一个使用Semantic UI制作的HTML。我有一个Semantic菜单，然后我有一个带标题的div。我希望该div在高度上占据整个屏幕。当滚动时，应该出现第二个div。
我找到了这个网站上的教程。尽管我按照教程操作，但无法将高度设置为100％。请告诉我我的错误在哪里。我学习这个才一周，这让我很疯狂。我尝试搜索答案，但找不到解决我的问题的答案。感谢您的帮助，如果这不是应该在这里或者它太基础了，请原谅。
1个回答
3
1.) 你的#top-section元素的父级是.pusher，没有定义高度。需要添加100%高度。
2.) 你为.top-section定义了100%的高度，但是作为ID，#firstDiv（没有定义高度）将覆盖它，因此也需要添加100%高度。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接