How to make the div with a scrollable content in the middle of page responsive in height, when top div height is dynamic

Question

So my page is divided into 3 parts. The header in which we have collapsable content, the middle part should be in the center of page and scrollable. And the fixed footer.

The issue I have is when the content in the header is expanded, the middle part should shrink and become scrollable, but without going outside of boundaries of header and footer. Added some jsfiddle too example code:

<div class="container-fluid">


<div class="row">


 <div class="col-lg-12" style="padding-left: 0;  border-right: 2px solid #EEEEEE; padding-right: 0; height: 100vh">

        <div class="container-fluid" style="height: 100%">

            <div class="row upper" style=" height: auto;  background-color: yellow">
                <div class="col-md-12">
                        <h2>Simple Collapsible</h2>
                        <p>Click on the button to toggle between showing and hiding content.</p>
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                </div>
            </div>
            <div class="row middle-section" style="height:auto; background-color:azure; overflow-y: scroll">
                <div class="col-md-12">
                        <h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
                                elit</h1>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
                                elit. Aenean commodo ligula eget dolor. Aenean massa 
                                <strong>strong</strong>. Cum sociis natoque penatibus 
                                et magnis dis parturient montes, nascetur ridiculus 
                                mus. Donec quam felis, ultricies nec, pellentesque 
                                eu, pretium quis, sem. Nulla consequat massa quis 
                                enim. Donec pede justo, fringilla vel, aliquet nec, 
                                vulputate eget, arcu. In enim justo, rhoncus ut, 
                                imperdiet a, venenatis vitae, justo. Nullam dictum 
                                felis eu pede <a class="external ext" href="#">link</a> 
                                mollis pretium. Integer tincidunt. Cras dapibus. 
                                Vivamus elementum semper nisi. Aenean vulputate 
                                eleifend tellus. Aenean leo ligula, porttitor eu, 
                                consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
                                dapibus in, viverra quis, feugiat a, tellus. Phasellus 
                                viverra nulla ut metus varius laoreet. Quisque rutrum. 
                                Aenean imperdiet. Etiam ultricies nisi vel augue. 
                                Curabitur ullamcorper ultricies nisi.</p>
                                <h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
                                elit</h1>
                                <h2>Aenean commodo ligula eget dolor aenean massa</h2>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
                                elit. Aenean commodo ligula eget dolor. Aenean massa. 
                                Cum sociis natoque penatibus et magnis dis parturient 
                                montes, nascetur ridiculus mus. Donec quam felis, 
                                ultricies nec, pellentesque eu, pretium quis, sem.</p>
                                <h2>Aenean commodo ligula eget dolor aenean massa</h2>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
                                elit. Aenean commodo ligula eget dolor. Aenean massa. 
                                Cum sociis natoque penatibus et magnis dis parturient 
                                montes, nascetur ridiculus mus. Donec quam felis, 
                                ultricies nec, pellentesque eu, pretium quis, sem.</p>
                                <ul>
                                  <li>Lorem ipsum dolor sit amet consectetuer.</li>
                                  <li>Aenean commodo ligula eget dolor.</li>
                                  <li>Aenean massa cum sociis natoque penatibus.</li>
                                </ul>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
                                elit. Aenean commodo ligula eget dolor. Aenean massa. 
                                Cum sociis natoque penatibus et magnis dis parturient 
                                montes, nascetur ridiculus mus. Donec quam felis, 
                                ultricies nec, pellentesque eu, pretium quis, sem.</p>
                </div>
            </div>


            <div class="row myfooter" style="position: fixed; bottom: 0; height:5%;width: 100%; background-color:blue">
                <div class="col-md-12">
                    my footer
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>

the header and footer to be sticky, the header have content which is expandable, the middle part should be scrollable, and if the content in the header is expanded it should shrink the middle part, but stay scrolllable and boundaries should touch header and footer — AlexFF1, Mar 20 '18 at 15:51
Your header is not sticky at the moment. But, if you add `row.middle-section { margin-bottom: 20px; }` your content won't go into your footer. You need to modify some CSS to get your desired effects. What CSS have you tried? How have you tried making the header sticky? — adprocas, Mar 20 '18 at 15:53
Is this what you're looking for? https://stackoverflow.com/questions/29038596/bootstrap-fixed-header-and-footer-with-scrolling-body-content-area-in-fluid-cont — adprocas, Mar 20 '18 at 15:57
exactly like this, but only the content in the header is expandable, so when its expanded, the middle part should shrink and be responsive — AlexFF1, Mar 20 '18 at 15:59
Ok, so get it working like that first and see if the middle works properly. Your example doesn't have a fixed header. When I scroll the header scrolls too. One issue at a time! — adprocas, Mar 20 '18 at 16:00
updated fsfiddle https://jsfiddle.net/Alexfeds/DTcHh/55403/ but the problem is when I expand text in the header the middle should shrink.. — AlexFF1, Mar 20 '18 at 16:06
https://jsfiddle.net/Alexfeds/DTcHh/55403/#&togetherjs=RfxNeOx20l — AlexFF1, Mar 20 '18 at 16:22

score 0 · Answer 1 · answered Mar 21 '18 at 01:12

Here is a working example using Flexbox.

$(".btn.btn-info").click(function(e) {
 e.preventDefault();
  
  if($(this).hasClass("active")) {
   $(this).removeClass("active")
   $("#demo").slideUp();
  } else {
   $(this).addClass("active")
   $("#demo").slideDown();
  }
});

body {
  margin: 0px;
  padding: 0px;
}
.container-fluid {
  height: 100vh;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.row.upper {
  width: 100%;
  background-color: yellow;
}
.row.middle-section {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color:azure;
  overflow-y: auto;
}
.row.myfooter {
  background-color:blue;
}
#demo {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <div class="container-fluid">
        <div class="row upper">
          <div class="col-md-12">
            <h2>Simple Collapsible</h2>
            <p>Click on the button to toggle between showing and hiding content.</p>
            <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
            <div id="demo" class="collapse">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit,
              sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
          </div>
        </div>
        <div class="row middle-section">
          <div class="col-md-12">
            <h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
              elit</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
              elit. Aenean commodo ligula eget dolor. Aenean massa 
              <strong>strong</strong>. Cum sociis natoque penatibus 
              et magnis dis parturient montes, nascetur ridiculus 
              mus. Donec quam felis, ultricies nec, pellentesque 
              eu, pretium quis, sem. Nulla consequat massa quis 
              enim. Donec pede justo, fringilla vel, aliquet nec, 
              vulputate eget, arcu. In enim justo, rhoncus ut, 
              imperdiet a, venenatis vitae, justo. Nullam dictum 
              felis eu pede <a class="external ext" href="#">link</a> 
              mollis pretium. Integer tincidunt. Cras dapibus. 
              Vivamus elementum semper nisi. Aenean vulputate 
              eleifend tellus. Aenean leo ligula, porttitor eu, 
              consequat vitae, eleifend ac, enim. Aliquam lorem ante, 
              dapibus in, viverra quis, feugiat a, tellus. Phasellus 
              viverra nulla ut metus varius laoreet. Quisque rutrum. 
              Aenean imperdiet. Etiam ultricies nisi vel augue. 
              Curabitur ullamcorper ultricies nisi.</p>
            <h1>Lorem ipsum dolor sit amet consectetuer adipiscing 
              elit</h1>
            <h2>Aenean commodo ligula eget dolor aenean massa</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
              elit. Aenean commodo ligula eget dolor. Aenean massa. 
              Cum sociis natoque penatibus et magnis dis parturient 
              montes, nascetur ridiculus mus. Donec quam felis, 
              ultricies nec, pellentesque eu, pretium quis, sem.</p>
            <h2>Aenean commodo ligula eget dolor aenean massa</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
              elit. Aenean commodo ligula eget dolor. Aenean massa. 
              Cum sociis natoque penatibus et magnis dis parturient 
              montes, nascetur ridiculus mus. Donec quam felis, 
              ultricies nec, pellentesque eu, pretium quis, sem.</p>
            <ul>
              <li>Lorem ipsum dolor sit amet consectetuer.</li>
              <li>Aenean commodo ligula eget dolor.</li>
              <li>Aenean massa cum sociis natoque penatibus.</li>
            </ul>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
              elit. Aenean commodo ligula eget dolor. Aenean massa. 
              Cum sociis natoque penatibus et magnis dis parturient 
              montes, nascetur ridiculus mus. Donec quam felis, 
              ultricies nec, pellentesque eu, pretium quis, sem.</p>
          </div>
        </div>
        <div class="row myfooter">
          <div class="col-md-12">
            my footer
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JSFiddle here.

AlexFF1 · Accepted Answer · 2018-03-23T15:05:51.340

Here is a solution for dynamic height scrollable content using css table property. This solution will work on all browsers, well hopefully:

jsfiddle

html:

 <div class="table container">
<div class="table-row header">
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
   <div id="demo" class="collapse">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit,
       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
     enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat.
 </div>


</div>
<div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
        <div class="body-content-inner-wrapper">
            <div class="body-content">
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                 <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                 <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                 <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
                <div>This is the scrollable content whose height is unknown</div>
            </div>
        </div>
    </div>
</div>

css:

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

.container {
    width: 400px;
    height: 100vh;
}

.header {
    background: cyan;
}

.body {
    background: yellow;
    height: 100%;
}

.body-content-outer-wrapper {
    height: 100%;
}

.body-content-inner-wrapper {
    height: 100%;
    position: relative;
    overflow: auto;
}

.body-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

How to make the div with a scrollable content in the middle of page responsive in height, when top div height is dynamic

2 Answers2