Why isn't ul using full nav's height?-CodePudding

I'm having some problems creating a header. Here, my ul is not using the full height of the nav, but the nav IS using the full height of the header. I want to fix this in order to center vertically the text. Thank you.

(edit) When I use height: 100%; on the ul, this happens.

This is my HTML:

 <header>
        <div >
            <img src="img/logo.png"/>
        </div>
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">WORKS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
    </header>

This is my SASS:

$BLACK:#000;
$WHITE:#fff;

* {
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 75px;
    background-color: $BLACK;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .logo {
        width: 50%;
        display: flex;
        align-items: center;
        padding-left: 50px;
    }

    nav {
        width: 50%;
        padding-right: 50px;

        ul {
            list-style-type: none;
            display: flex;
            flex-flow: row wrap;
            justify-content: right;

            li {
                display: inline-block;
                margin-left:50px;

                a {
                    text-decoration: none;
                    color: $WHITE;
                }
            }
        }
    }
}

CodePudding user response：

Here is a solution for this. Just add line-height: 75px; to the li elements and set the ul element's margin to zero by adding margin: 0px;.

* {
    box-sizing: border-box;
}
header {
    width: 100%;
    height: 75px;
    background-color: #000;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
header .logo {
    width: 50%;
    display: flex;
    align-items: center;
    padding-left: 50px;
}
header nav {
    width: 50%;
    padding-right: 50px;
}
header nav ul {
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: right;
    margin: 0px;
}
header nav ul li {
    display: inline-block;
    margin-left: 50px;
    line-height: 75px;
}
header nav ul li a {
    text-decoration: none;
    color: #fff;
}

<header>
    <div >
        <img src="img/logo.png"/>
    </div>
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">WORKS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>
</header>

However I converted your SASS code into CSS to run it on the stack overflow code snippet runner. You can change this to SASS again if you want.

Thanks and best regards!

CodePudding user response：

Its probably because you did not reset the margin for the ul tag and also apply a 100% percent height to it also.

$BLACK: #000;
$WHITE: #fff;

* {
  box-sizing: border-box;
  // margin: 0;
  // padding: 0;
}

header {
  width: 100%;
  height: 75px;
  background-color: $BLACK;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

  .logo {
    width: 50%;
    display: flex;
    align-items: center;
    padding-left: 50px;
  }

  nav {
    width: 50%;
    padding-right: 50px;
    background: red;

    ul {

      list-style-type: none;
      display: flex;
      flex-flow: row wrap;
      justify-content: right;
      background: orange;
      height: 100%;

      li {
        display: inline-block;
        margin-left: 50px;

        a {
          text-decoration: none;
          color: $WHITE;
        }
      }
    }
  }
}

<header>
  <div >
    <img src="https://via.placeholder.com/20x20.png/09f/fff" />
  </div>
  <nav>
    <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">WORKS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</header>

CodePudding user response：

Please update your css with following code:

   $BLACK:#000;
$WHITE:#fff;

* {
    box-sizing: border-box;
}

header {
    width: 100%;
    height: 75px;
    background-color: $BLACK;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .logo {
        width: 50%;
        display: flex;
        align-items: center;
        padding-left: 50px;
    }

    nav {
        width: 50%;
        padding-right: 50px;
        height: 100%;
        display: flex;
        align-items: center;
        ul {
            list-style-type: none;
            display: flex;
            flex-flow: row wrap;
            justify-content: right;
            flex: 1 0 auto;
            align-self: stretch;
            align-items: center;
            
            li {
                display: inline-block;
                margin-left:50px;

                a {
                    text-decoration: none;
                    color: $WHITE;
                }
            }
        }
    }
}