not able to set height of vertical navigation bar to the full page in CSS

user_7186002 0
Viewed 643

I am trying to make a vertical navigation bar. I have made a navbar.I want to set it's height to full page but i am not able to do that even when is set height:100% in CSS. I want content like para to be displayed on its left side.

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
  height: 100%;
  background-color: grey;
}

ul li {
  text-align: center;
  background-color: grey;
  border-bottom: 1px solid black;
}

ul li a {
  font-family: monospace;
  color: white;
  font-size: 23px;
  text-decoration: none;
  display: block;
  padding: 10px;
  pos
}

ul li a:hover {
  background-color: white;
  color: black;
}

ul li a:active {
  background-color: cadetblue;
  color: red;
}

div {
  display: inline;
}
<ul>
  <li><a class="active" href="#home" target="_blank">Home</a></li>
  <li><a href="#news" target="_blank">News</a></li>
  <li><a href="#contact" target="_blank">Contact</a></li>
  <li><a href="#about" tartget="_blank">About</a></li>
</ul>


<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>

I tried to change the display: parameter of the unordered list to display:inline and also the display: parameter of div tag to display:inline How do I set the height to full page and also display content on its left side.

navbar css html
2 Answers

When you use height:100%; it means that you want that element to be 100% of its parent which in your case is body, and as height is not defined for it so it is auto. all you need to do is to add min-height:100vh for the body. It will solve your problem for full height navbar.

Now your next objective is to make the text to wrap around it, which can achieved by floating your navbar to left. This will make the next elements to wrap around it.

Setting div to display:inline; won't be a good thing to do just for achieving this result, because the moment you add next div it will start creating problems.

body {
  margin: 0;
  height: 100vh;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
  height: 100%;
  background-color: grey;
  float: left;
  margin-right: 10px;
}

ul li {
  text-align: center;
  background-color: grey;
  border-bottom: 1px solid black;
}

ul li a {
  font-family: monospace;
  color: white;
  font-size: 23px;
  text-decoration: none;
  display: block;
  padding: 10px;
}

ul li a:hover {
  background-color: white;
  color: black;
}

ul li a:active {
  background-color: cadetblue;
  color: red;
}
<body>
  <ul>
    <li><a class="active" href="#home" target="_blank">Home</a></li>
    <li><a href="#news" target="_blank">News</a></li>
    <li><a href="#contact" target="_blank">Contact</a></li>
    <li><a href="#about" tartget="_blank">About</a></li>
  </ul>


  <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>

  <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>

</body>

user_153873410

My suggestion is to use Bootstrap or for understanding you can do it like this also:

<html>

<head>
  <style>
    body {
      margin: 0;
    }
    
    ul {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      width: 20vw;
      height: 100%;
      background-color: grey;
    }
    
    ul li {
      text-align: center;
      background-color: grey;
      border-bottom: 1px solid black;
    }
    
    ul li a {
      font-family: monospace;
      color: white;
      font-size: 23px;
      text-decoration: none;
      display: block;
      padding: 10px;
      pos
    }
    
    ul li a:hover {
      background-color: white;
      color: black;
    }
    
    ul li a:active {
      background-color: cadetblue;
      color: red;
    }
    
    div {
      display: inline;
    }
  </style>
</head>

<body>
  <div style="float: left; width: 20vw;">
    <ul>
      <li><a class="active" href="#home" target="_blank">Home</a></li>
      <li><a href="#news" target="_blank">News</a></li>
      <li><a href="#contact" target="_blank">Contact</a></li>
      <li><a href="#about" tartget="_blank">About</a></li>
    </ul>
  </div>
  <div style="float: right;width: 75vw">
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>

  </div>


</body>

</html>

user_68702230
Related