How to add a tag to bottom of a div?-CodePudding

I got this sidebar but I wonder how can I add an item to the bottom of the sidebar. here is the current code.

body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="sidebar">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
    </div>
    <div class="content">
      Dummy
    </div>
  </body>
</html>

Currently, when I add an item to the sidebar it comes just below the last item, I want it to be at the bottom end even when the content side has a scroll bar, like the profile icon seen in most apps

CodePudding user response：

The first thing to to is actually put your extra element inside the sidebar then leverage flexbox column layout,

body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  min-height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.sidebar a {
  display: block;
  color: black;
  padding: 6px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-top: auto;
  padding: 6px;
  background: rebeccapurple;
  color: white;
}

<div class="sidebar">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>

  <div class="content">
    Dummy
  </div>
</div>

CodePudding user response：

If you want it as another navigation element you can add another div inside of the sidebar, but force it to the bottom with this css code:

div.bottom {
    position: absolute;
      bottom: 0;
      width: 100%;
    }

Full Code:

  body {
  margin: 0;
  font-family: "Lato", sans-serif;
}

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}
div.bottom {
position: absolute;
  bottom: 0;
  width: 100%;
}
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="sidebar">
      <a class="active" href="#home">Home</a>
      <a href="#news">News</a>
      <a href="#contact">Contact</a>
      <a href="#about">About</a>
      <div class="bottom"><a href="#logout">Logout</a></div>
    </div>
    <div class="content">
      Dummy
    </div>
  </body>
</html>