當頂部div高度為動態時，如何使div具有可滾動內容的div在頁面中間響應高度

Question

所以我的頁面分為三個部分。 標頭中包含可折疊的內容，中間部分應位於頁面中心並且可滾動。 和固定的頁腳。

我遇到的問題是，當頁眉中的內容擴展時，中間部分應縮小並變為可滾動，但又不會超出頁眉和頁腳的邊界。 也添加了一些jsfiddle 示例代碼 ：

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

Answer 1

這是一個使用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在這里 。

Answer 2

這是使用css table屬性動態高度可滾動內容的解決方案。 該解決方案將可在所有瀏覽器上運行，希望如此：

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