CODEWITHSUNDEEP
javascripthtmlcss
samfox
samfox

Reputation: 11

Full height element inside dynamic height scrollable DIV

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.

Upvotes: 1

Views: 1930

Answers (3)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

@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>

Upvotes: 0

mohamed youssouf
mohamed youssouf

Reputation: 1573

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

Upvotes: 0

Nora
Nora

Reputation: 3261

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%;
}

Upvotes: 1

Related Questions