CODEWITHSUNDEEP
htmlcsssemantic-ui
Rohan
Rohan

Reputation: 4666

height:100% does not work when using Semantic-UI

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>

And this is the accompanying 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;
}

This is my code. I have a HTML which is made using Semantic UI. I have a Semantic Menu and then I have a div which has a Heading. I want that div to occupy 100% of my screen in height. There will be a second div that should be visible only when scrolled.

I came across this website which had a tutorial. Even though I followed the tutorial, I could not set the height to 100%. Please let me know where my error is. Its just been a week that I have started learning this and this has been driving me crazy. I tried searching for answers but couldn't find the one that would solve my query. Thanks for your help and sorry if this was not meant to be here or if it is too basic.

Upvotes: 5

Views: 9873

Answers (1)

Johannes
Johannes

Reputation: 67798

1.) THe parent of your #top-section element is .pusher, which has no defined height. Add 100% height to that.

2.) You defined 100% height for .top-section, but as an ID, #firstDiv (which has no defined height) will overrule that, so add 100% height to that too.

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

Upvotes: 3

Related Questions