-1

I have the following code snippet:

.topbar-container {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
  background-color: #2d3e50;
  z-index: 999;
  display: flex; }

.navi-container {
  width: 100%;
  height: 50px;
  background-color: #119c7e;
  position: fixed;
  top: 100px;
  z-index: 999;
  display: flex;
  justify-content: center; }
  @media (min-width: 992px) {
    .navi-container .navi-menu {
      width: 992px;
      height: 100%;
      color: #2d3e50;
      overflow: hidden;
      }
      .navi-container .navi-menu a {
        display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);} }

.portfolio-container {
  width: 992px;
  position: absolute;
  top: 155px; }

.app-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  top: 0px;
  position: relative;
  align-items: center; }

* {
  padding: 0;
  margin: 0; }

html,
body {
  height: 100%;
  width: 100%;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif; }

#root {
  box-sizing: border-box;
  height: 100%;
  width: 100%; }
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>Cockpit</title>

<body cz-shortcut-listen="true">
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">
        <div class="app-container">
            <div class="topbar-container"></div>
            <div class="navi-container">
                <section class="navi-menu"><a>DASHBOARD</a><a>COINS</a></section>
            </div>
            <div class="portfolio-container">
                <p>
                    Lorem

                </p>
            </div>
        </div>
    </div>
</body>

</html>

And I would like to set the link to 100% height. How can I do it?

softshipper
  • 32,463
  • 51
  • 192
  • 400

4 Answers4

0

You can try updating the height for class navi-container to 100%

height: 100%;

Hope this works !

Rahul Vishwakarma
  • 1
  • 1
0

Check if changing .navi-container default height to 100% works. If it does, there might be some other problem in the code.

.navi-container {
    width: 100%;
    height: 100%;
}
Sepehr Mohammadi
  • 13
  • 1
  • 6
0

The problem is that a is an inline element. If you want the element to have a height it should have display: inline-block; and height: 100%;.

Sven
  • 357
  • 4
  • 10
  • If you want to have them one under the other set them to `display: block;` and `height: 50%;`so you can be sure that they will take 100% of the 50px the parent has – Sven Aug 09 '18 at 15:08
-1

Try: .navi-menu a{ height: 100%; ...other CSS styles }

Because it is an inline-block container you can define the block's size properties, but if you do not define them, it will adapt according to the content. Soon the size of the text inside the tag <a>

works fine on codepen - https://codepen.io/anon/pen/vavEar

Bruno Cardoso
  • 49
  • 9