Question 389928 in CSS Question posted in
Some basic documentation can be found here.

Set the height of <div> based on the height of another <div> through css

I have two divs: a div with a Text Field and a div with a long list of items. My use case is to keep the search box (text field) at the top while the listContainer div can scroll if it contains a large number of items. Currently, the scroll bar is added to the entire parent div, so the search box is hidden as you scroll. I only need the scrollbar for the list container.

The problem is solved if I know the height of the search container and parent (listContainer height = parent height — searchContainer height). Is there a way to compute the height of the list container using CSS?

.parent {
  height: 100%
}

.searchContainer {}

.listContainer {
  height: 90%;
}
<div class="parent">
  <div class="searchContainer">
    <input placeholder="Enter search string">
  </div>
  <div class="listContainer">
    <div class="list-item">1</div>
    <div class="list-item">2</div>
    <div class="list-item">3</div>
    <div class="list-item">4</div>
    <div class="list-item">5</div>
    <div class="list-item">6</div>
    <div class="list-item">7</div>
    <div class="list-item">8</div>
    <div class="list-item">9</div>
    <div class="list-item">10</div>
    <div class="list-item">11</div>
    <div class="list-item">12</div>
    <div class="list-item">13</div>
    <div class="list-item">14</div>
    <div class="list-item">15</div>
    <div class="list-item">16</div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    One way to solve this would be to position the .searchContainer absolutely within the parent container, and add some top padding to the listContainer to push it down below the input.

    .parent {
  position: relative;
  height: 100%
}

.searchContainer {
  position: absolute;
}

.listContainer {
  height: 100px;
  padding-top: 25px;
  overflow-x: scroll;
}
    <div class="parent">
  <div class="searchContainer">
    <input placeholder="Enter search string">
  </div>
  <div class="listContainer">
    <div class="list-item">1</div>
    <div class="list-item">2</div>
    <div class="list-item">3</div>
    <div class="list-item">4</div>
    <div class="list-item">5</div>
    <div class="list-item">6</div>
    <div class="list-item">7</div>
    <div class="list-item">8</div>
    <div class="list-item">9</div>
    <div class="list-item">10</div>
    <div class="list-item">11</div>
    <div class="list-item">12</div>
    <div class="list-item">13</div>
    <div class="list-item">14</div>
    <div class="list-item">15</div>
    <div class="list-item">16</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    My use case is to keep the search box (text field) at the top

    Consider position:sticky;

    MDN link for more info

    Add

    .searchContainer {
  position:sticky;
  top:0;
}

    to your css and it will "stick" to the top. If you don’t want it to move at all, then tweak the top:0; setting.

    .parent {
  height: 100%
}

.searchContainer {
  position: sticky;
  top: 0;
}

.listContainer {
  height: 90%;
}
    <div class="parent">
  <div class="searchContainer">
    <input placeholder="Enter search string">
  </div>
  <div class="listContainer">
    <div class="list-item">1</div>
    <div class="list-item">2</div>
    <div class="list-item">3</div>
    <div class="list-item">4</div>
    <div class="list-item">5</div>
    <div class="list-item">6</div>
    <div class="list-item">7</div>
    <div class="list-item">8</div>
    <div class="list-item">9</div>
    <div class="list-item">10</div>
    <div class="list-item">11</div>
    <div class="list-item">12</div>
    <div class="list-item">13</div>
    <div class="list-item">14</div>
    <div class="list-item">15</div>
    <div class="list-item">16</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search