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%。请让我知道我的错误在哪里。我才开始学习这个就一周了，这让我发疯了。我尝试搜索答案，但找不到可以解决我的查询的答案。感谢您的帮助，如果这不应该出现在这里或者它太基础了，我们深表歉意。
最佳答案
1.) #top-section 元素的父元素是 .pusher，它没有定义高度。添加 100% 的高度。
2.) 您为 .top-section 定义了 100% 的高度，但是作为 ID，#firstDiv(没有定义的高度)将否决它，所以也为其添加 100% 高度。
关于html - 高度 :100% does not work when using Semantic-UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37869494/