CODEWITHSUNDEEP
htmlcss
Colin DeClue
Colin DeClue

Reputation: 2244

Position an element at the bottom of a parent element that may or may not scroll

I have a parent div with a known height and a child div with a known height. There is an unknown amount of content also in the parent div. If the content is less than the parent div's height, the parent div does not scroll, and the child div should appear at the bottom of the div. If there's more content than the parent div, the parent div should scroll, and the child div should appear at the bottom of the parent div, within the flow of the document, after scrolling.

Edit: I need to support IE9, so, unfortunately, flexbox is out of the question.

The following fiddle shows what I mean:

https://jsfiddle.net/5208Lcdq/

In the first div, BOTTOM should appear after scrolling (as if it was positioned: static as opposed to absolute). In the second, it should appear as it does, positioned absolutely.

Is there a way I can do this without javascript to detect the scroll height of the parent?

.outer {
  position: relative;
  width:100px;
  height:100px;
  overflow-y:auto;
  margin: 50px;
  border: 1px solid black;
}

.bottom {
    margin-top: 10px;
    position: absolute;
    bottom: 0;
  }
<div class="outer">
<div class="content">
This is some content
This is some content
This is some content
This is some content
This is some content
This is some content

</div>
<div class="bottom">
BOTTOM
</div>
</div>

<div class="outer">
<div class="content">
This is some content
</div>
<div class="bottom">
BOTTOM
</div>
</div>

Upvotes: 0

Views: 59

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

flex might be a possibility if i understood:

.outer {
  height: 100px;
  width: 11em;
  overflow: auto;
  display: inline-flex;
  flex-direction: column;
  overflow-y: auto;
  margin: 20px;
  border: 1px solid black;
}
.content {
  flex: 1;
}
.bis {
  height:150px;
  }
<div class="outer">
  <div class="content">
    This is some content This is some content This is some content This is some content This is some content This is some content

  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

<div class="outer">
  <div class="content">
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>
<div class="outer bis">
  <div class="content">
    No matter what height No matter what height No matter what height No matter what height No matter what height This is some content This is some content This is some content This is some content This is some content This is some content

  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

<div class="outer bis">
  <div class="content">
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

Upvotes: 0

Bagzli
Bagzli

Reputation: 6569

I believe what you are asking for is this: https://jsfiddle.net/5208Lcdq/6/

Code:

<div class="outer">
  <div class="content">
    This is some content
    This is some content
    This is some content
    This is some content
    This is some content
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

<div class="outer">
  <div class="content">
    This is some content
  </div>
  <div class="bottom">
    BOTTOM
  </div>
</div>

CSS

.outer {
  position: relative;
  width:100px;
  height:100px;
  overflow-y:auto;
  margin: 50px;
  border: 1px solid black;
}

.bottom {
    margin-top: 10px;
    position: relative;
    bottom: 0;
  }
 .content{
     min-height: 70px;
  }

Upvotes: 2

Related Questions