gpt4 book ai didi

html - 高度 :100% does not work when using Semantic-UI

转载 作者:可可西里 更新时间:2023-11-01 13:02:02 24 4
gpt4 key购买 nike

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% 高度。

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

关于html - 高度 :100% does not work when using Semantic-UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37869494/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com