Scrolling DIV, I want a DIV inside of it with 100% Height

Question

I have a div that scrolls, and there is a div inside of it that I wanted to set 100% height to. It's not working, though. Here is my code:

 .column { float: right; width: 88%; max-height: 430px; overflow-y: scroll; overflow-x: hidden; border: 0; position: relative; } .detailed { position: absolute; right: 0; top: 0; bottom: 0; z-index: 9999999; background: #fff; width: 240px; height: auto; min-height: 100%; max-height: 100%; box-shadow: -5px 0px 10px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: -5px 0px 10px 1px rgba(0, 0, 0, 0.1); padding-bottom: 100px; } 

 <div class="column"> <div class="detailed"></div> </div> 

Edit Note: It was just a spelling error. The main document has the correct spelling and everything. I was tired.

Answer 1

See fiddle: https://jsfiddle.net/0q1jy877/

.column {
  float: right;
  width: 88%;
  max-height: 430px;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 0;
  border: 1px solid green;
}

.details {
  background: #fff;
  width: 240px;
  height: auto;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
  box-shadow: -5px 0px 10px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: -5px 0px 10px 1px rgba(0,0,0,0.1);
  padding-bottom: 100px;
}

<div class="column">
   <div class="details"></div>
</div>

Your html div with class "column" was missing a quotation mark, and you used the ".detailed" class in your css but ".details" class in your html so it didn't match up.

Apart from that I basically just removed the position & top/left/bottom/right properties as they weren't necessary for what you want to achieve.

Answer 2

There are a few ways this can be achieved. I personally like using the simple method in which I used when creating responsive iframes and the result would be the same regardless of content.

I simply add a

padding-bottom: 56.25%

I also added a white background so you can see the height, and keep in mind you have your main container set to 430px.

See demo here: https://jsfiddle.net/norcaljohnny/636m15dj/1/