make one
appear at the bottom of the page

Question

I've got a vertical menu in which i want the last li tag to appear at the bottom of the page. I've tried a few things suggested like vertical-align bottom but that doesn't seem to work.

Here is my HTML.

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  min-height: 100%;
  max-height: 100%;
}

#intro {
  width: 100%;
  height: 50px;
  background-color: blue;
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  display: inline-block;
  position: fixed;
  padding: 0;
}

#leftmenu {
  width: 100px;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  background-color: lightblue;
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  display: inline-block;
  position: fixed;
  overflow: hidden;
  padding: 0;
  float: left;
}

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 150px;
  background-color: #f1f1f1;
  position: fixed;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

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

#content {
  margin-left: 50%;
  margin-right: 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>SquashBug</title>
</head>

<body>

  <div id="intro">
    <div id="content">
      <p1>Content</p1>
    </div>
  </div>
  <div id="leftmenu">
    <ul>
      <li><a class="active" href="#Start">Issue Finder</a></li>
      <li><a href="#First">System Information</a></li>
      <li><a href="#Second">Running Processes</a></li>
      <li><a href="#Third">Anti-Virus</a></li>
      <li><a href="#Fourth">About</a></li>
    </ul>
  </div>
</body>

</html>

What I'm basically trying to do is if you click this link https://www.w3schools.com/Css/css_navbar.asp and look under right align links you will see a horizontal menu with About forced to go to the right. I want to have that in the vertical menu with the last link being at the bottom of the page. I'm creating an electron app if that is of any useful information.

https://stackoverflow.com/questions/30957108/make-li-items-side-by-side-and-at-bottom-of-page — Ramesh, Aug 18 '18 at 14:35

Galarist · Answer 1 · 2018-08-18T16:11:23.670

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

#content {
  width: 100%;
  height: 100%;
  background-color: #e0fcff;
  margin-left: 150px;
  margin-right: 0;
  margin-top: 0;
  display: inline-block;
  position: fixed;
  padding: 5px 5px 5px 5px;
}

#leftmenu {
  display: inline-block;
  list-style-type: none;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 150px;
  background-color: #f1f1f1;
  position: fixed;
  overflow: auto;
  float: left;
}

ul {}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

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

.Btm {
  position: fixed;
  Bottom: 0;
  width: 150px;
}

.Btm a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

<div id="content">
  <p1>Content</p1>
</div>

<ul id="leftmenu">
  <li><a class="active" href="#Start">Issue Finder</a></li>
  <li><a href="#First">System Information</a></li>
  <li><a href="#Second">Running Processes</a></li>
  <li><a href="#Third">Anti-Virus</a></li>
  <li class="Btm"><a href="#Fourth">About</a></li>
</ul>

On my electron app all the menu items are gone except for about which stays to the top. I think the #leftmenu css is causing the issue. — Tim Marshall, Aug 18 '18 at 15:08
further inspection on the last class with just bottom:0; and position: fixed the link goes straight to the top and shows over issue finder link — Tim Marshall, Aug 18 '18 at 15:23
@TimMarshall You wanted like this? I edited my answer again. — Galarist, Aug 18 '18 at 16:15

score 0 · Answer 2 · answered Aug 18 '18 at 15:14

0

Use the code below:

.nav-list {
    height: 100%;
    position: relative;
}

.last {
    position: absolute;
    bottom: 0;
}

Because there is no way for the CSS see which <li> tag is last, you will have to manually set it by using <li class=“last”>. Make sure that your navigation bar is is a <ul class=“nav-list”> tag with a set height (aka, not auto. I recommend height: 100%)

answered Aug 18 '18 at 15:14

Eb946207

748
8
26

Found a cheap and easy solution, since the electron app window is going to be static, I made the .last class margin-top: 369px. It works. Thanks for your help guys. – Tim Marshall Aug 18 '18 at 15:55

make one appear at the bottom of the page

2 Answers2

make one
appear at the bottom of the page