Full height element inside dynamic height scrollable DIV

Question

THE PROBLEM

I have two DIV elements: #container and #child. The #container is scrollable and the #child must take the full height of the #container. However the #child does not take the full height of the #container. Note that the #container has a dynamic height so the #child always has to use the same height.

The problem is shown HERE (JSFiddle).

<div id="container">
  <div id="child"></div>
</div>

html, body {
  height: 100%;
}

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

#container {
  position: relative;
  width: 80%;
  height: 80%;
  overflow-y: auto;
  background-color: lightgrey;
}

#child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50px;
  background-color: lightcoral;
}

I actually have a quite good JavaScript solution for this HERE (JSFiddle). But does anyone know a decent CSS-only solution for this? Would be so much simpler.

Why do you separate the child and container in your example? You could put the background on the container and forget about your child? Or do you want two children, one the red bar and the other text? — kabanus, Jan 04 '17 at 15:01
Possible duplicate of [Make absolute positioned div expand parent div height](http://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height) — Dave, Jan 04 '17 at 15:09
@Dave, not a duplicate - that's wanting to make the absolutely positioned child expand it's parent - this is wanting to make the child expand to the full height of the parent — Pete, Jan 04 '17 at 15:33
@samfox how's this? https://jsfiddle.net/r2h6tte2/10 as you can see, the child scrolls with the content (unlike the answer below) — Pete, Jan 04 '17 at 15:37

score 1 · Answer 1 · answered Jan 04 '17 at 15:00

You could add an additional container, check out jsfiddle:

HTML:

<div id="container">
  <div class="container-scroller">
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>
  TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT
  </div>
  <div id="child"></div>
</div>

CSS:

html, body {
  height: 100%;
}

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

#container {
  position: relative;
  width: 80%;
  height: 80%;
  background-color: lightgrey;
}

.container-scroller {
  height: 100%;
  overflow-y: scroll;
}

#child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50px;
  background-color: lightcoral;
  height: 100%;
}

Not so good because when he add more text inside `#child`, the `#child` has not scrolling. https://jsfiddle.net/r2h6tte2/8/ — Dave, Jan 04 '17 at 15:07
Should `#child` contents be scrollable? Or do you want the `#child` to scroll like text? — Nora, Jan 04 '17 at 15:09
the point of the added container is to use the .container-scroller to hold the content and the #child to show the bar. — Kuja, Jan 04 '17 at 15:09
I actually don't need to put anything into #child but I generally don't like adding inner-DIVS. Thanks for your solution anyway, it's a good idea. — samfox, Jan 04 '17 at 15:15

score 0 · Answer 2 · answered Jan 04 '17 at 16:17

0

Just remove position absoluting from#child element and give it min-height: 100%; instead of height: 100%; and add overflow: hidden;. Check working demo

answered Jan 04 '17 at 16:17

mohamed youssouf

1,485
2
11
15

score 0 · Answer 3 · answered Jan 04 '17 at 20:10

@samfox what actually you want to create using position absolute on child?if you want to use only css then you need to add a html part which just hold the width height and overflow-y of the container id HTML FIDDLE and without changing any html css just simple 1 line jquery can solve your problem jQuery 1 line Solution

HTML Solution --

html,
body {
  height: 100%;
}

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

#holder {
  width: 80%;
  height: 80%;
  overflow-y: auto;
}

#container {
  position: relative;
  background-color: lightgrey;
}

#child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 50px;
  background-color: lightcoral;
}

<div id="holder">

 <div id="container">
  <div id="child"></div>
    TEXT
    <br>TEXT<br>TEXT<br>TEXT<br>TEXT<br>TEXT  <br>TEXT<br>TEXT <br>TEXT<br>TEXT <br>TEXT <br>TEXT <br>TEXT  <br>TEXT<br> TEXT<br>TEXT <br>TEXT<br>TEXT <br>TEXT <br>TEXT <br>TEXT  <br>TEXT<br> TEXT<br>TEXT <br>TEXT<br>TEXT <br>TEXT <br>TEXT <br>TEXT  <br>TEXT<br> TEXT<br>TEXT <br>TEXT<br>TEXT <br>TEXT <br>TEXT <br>TEXT  <br>TEXT<br> TEXT<br>TEXT <br>TEXT<br>TEXT <br>TEXT <br>TEXT <br>TEXT  <br>TEXT<br> TEXT <br>TEXT  <br>TEXT<br>TEXT <br>TEXT <br>TEXT<br>TEXT <br>TEXT <br>TEXT <br>TEXT  <br>TEXT<br> TEXT<br>
     </div>
</div>

My goal is to not use any additional HTML tags and without JavaScript. Just simple HTML and CSS. And your JQuery 1-Line-Solution only works when reloading the page. If you add some lines dynamically, then that code won't work. I have already posted a decent JavaScript solution anyway. — samfox, Jan 05 '17 at 08:28
Yes i see that js. But with css if you what to maintain that height you need adding html .. otherwise that overflow part comes with body.. — Baezid Mostafa, Jan 05 '17 at 10:43
I just hoped for someone to have a CSS-only solution for this but as you said, there probably is no solution for this currently. — samfox, Jan 05 '17 at 13:31

Full height element inside dynamic height scrollable DIV

3 Answers3