Question

所以我的页面分为3部分。我们有可折叠内容的标题，中间部分应位于页面的中心并可滚动。和固定的页脚。

我遇到的问题是当标题中的内容被扩展时，中间部分应该缩小并变得可滚动，但不会超出页眉和页脚的边界。添加了一些jsfiddle 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>

Answer 1

以下是使用Flexbox的工作示例。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JSFiddle here

Answer 2

这是使用css表属性的动态高度可滚动内容的解决方案。这个解决方案适用于所有浏览器，希望如此：

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

当顶部div高度是动态的时候，如何使页面中间的可滚动内容的div在高度上响应

2 个答案: