<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>
My recent project uses Semantic UI for styling, with a structured layout consisting of a navigation menu and a prominent heading within a div element. I wanted this div to fill 100% of the screen height, but encountered difficulties during implementation.
While searching for solutions, I stumbled upon this resource offering guidance on achieving full-screen heights in CSS layouts. Despite following the tutorial closely, I couldn't achieve the desired result. The struggle has been frustrating as I'm relatively new to web development.