CODEWITHSUNDEEP
htmlcsssidebar
aWdas
aWdas

Reputation: 145

Position element to the bottom of a height: 100% div

I would like to "pin" a button to the bottom of a sidebar-div that has a height of 100%, as it should fill the whole left side of the page.

I tried to do it this way:

.sidebar {
  height: 100%;
  position: relative;
  background-color: #CCCCCC;
 }
.btn {
  position: absolute;
  bottom:0px;
  top: auto;
 }
<div class="sidebar">
  <button class="btn">Button</button>
</div>

It might be because of the height in percent, as it works with a Pixel-height, but there must be some way of getting this done with percent, as the sidebar must span the entire page height.

Upvotes: 3

Views: 3622

Answers (2)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

To fix this, give your html and body a height of 100% as follows. Right now they don't have a defined height set (so they are 0px high), so your button is technically already at the bottom.

Live Example:

html, body {
  height: 100%;
}

.sidebar {
  height: 100%;
  position: relative;
  background-color: #CCCCCC;
 }
.btn {
  position: absolute;
  bottom:0;
 }
<div class="sidebar">
  <button class="btn">Button</button>
</div>

Upvotes: 2

Etheryte
Etheryte

Reputation: 25310

The issue is your container doesn't have any actual height. You'll need to define the height on both your html and body tags too to use percent height there.

html,
body {
  height: 100%;
  margin: 0;
}
.sidebar {
  height: 100%;
  position: relative;
  background-color: #CCCCCC;
}
.btn {
  position: absolute;
  bottom: 0px;
  top: auto;
}
<div class="sidebar">
  <button class="btn">Button</button>
</div>

Upvotes: 2

Related Questions