在两个垂直div之间放置一个可滚动的div

Question

我必须设计一个响应式用户界面，如下所示：

页眉和页脚固定在顶部和底部。 而在它们之间的垂直可滚动列表。 如果我没有给出固定的高度并且列表变得溢出，则列表位于页脚后面。 此外，我需要一个位于页脚上方的按钮，其上方有一个固定的边距。我知道这是一个常见的情况，但我尝试了大多数，但没有达到我的需要。

这是我的代码：

Html代码：

<div id="top">top</div>
<div id="bottom">bottom</div>
<div id="mid">mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br></div>

CSS代码：

#top
{
  border: solid 1px green;
}

#mid
{
  margin-top: auto;
  margin-bottom: auto;
  border: solid 1px red;
  position: fixed;
  height: 89%;
  width: 100%;
  overflow-y: auto;
  overflow-x: none;
}

#bottom
{
  border: solid 1px blue;
  position: fixed;
  bottom: 0;
}

任何人都可以帮我构建自适应用户界面，而不会为每件商品提供固定的高度。

Answer 1

通过使用Flexbox，您可以在top和bottom

上拥有动态高度

在display: flex上设置wrapper，为其设置一个高度，然后在flex-grow: 1上设置middle。

对于我使用绝对定位的button。

我还将您的id更改为了类，这是分配CSS规则的推荐方式

＆＃13;

＆＃13;

html, body {
  margin: 0
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 60%;
}
.middle {
  flex-grow: 1;
  overflow: auto;
}
.top {
 background: lightgreen;
}
.bottom {
 position: relative;
 background: lightblue;
}
.button {
 position: absolute;
 top: -70px;
 right: 50px;
 background: lightgray;
 border-radius: 50%;
 padding: 20px 8px;
}

＆＃13;

<div class="wrapper">
  <div class="top">top</div>
  <div class="middle">
    Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br>    Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br> Long content<br>
  </div>
  <div class="bottom">
  bottom
    <div class="button">button</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您必须支持旧浏览器，则此处是使用CSS表的版本

Fiddle demo

Stack snippet

＆＃13;

＆＃13;

html, body {
  margin: 0;
  height: 100%;
}
.wrapper {
  display: table;
  height: 100%;
  width: 60%;
}
.wrapper > div {
  display: table-row;
}
.top > div {
  background: lightgreen;
  padding: 10px;
}
.middle {
  height: 100%;
}
.middle > div {
  position: relative;
  height: 100%;
}
.middle > div > div {
  position: absolute;
  left: 0; top: 0;
  height: 100%; width: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
.bottom > div {
  position: relative;
  background: lightblue;
  padding: 10px;
}
.button {
  position: absolute;
  top: -70px;
  right: 50px;
  background: lightgray;
  border-radius: 50%;
  padding: 20px 8px;
}

＆＃13;

<div class="wrapper">
  <div class="top">
    <div>
      top
    </div>
  </div>
  <div class="middle">
    <div>
      <div>
        Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
        <br> Long content
      </div>
    </div>
  </div>
  <div class="bottom">
    <div>
      bottom
      <div class="button">button</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

关键是要保持#top和#bottom position: fixed，让#mid成为position: static OR relative。 #mid应该有padding: 50px 0，以防止任何重叠。

试试这个：

#top {
  background: lightgreen;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  z-index: 1
}

#mid {
  padding: 50px 0;
  position: relative;
  width: 100%;
  overflow-y: auto;
  overflow-x: none;
}

#bottom {
  background: lightblue;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  z-index: 1
}

#button {
  position: absolute;
  top: -60px;
  left: auto;
  right: 40px;
  z-index: 5
}

<div id="top">top</div>
<div id="bottom">bottom
  <div id="button"><button>Click me!</button></div>
</div>

<div id="mid">mid - first<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid
  - last</div>

Answer 3

样本

/* Table structure with ul and li (responsive) */

 html {
   height: 100%;
 }
 
 html body {
   height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
 html body .container-fluid.body-content {
   width: 100%;
   overflow-y: auto;
 }
 
 header {
   background-color: #42d1f4;
   min-height: 50px;
   width: 100%;
 }
 
 footer {
   background-color: #7af441;
   min-height: 30px;
   width: 100%;
 }
 
 .headingsmall {
   color: #3a4355;
   font-weight: bold;
   -webkit-text-shadow: 0px 0px 1px #119af2;
   -moz-text-shadow: 0px 0px 1px #119af2;
   -o-text-shadow: 0px 0px 1px #119af2;
   font: 400 24px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
   text-shadow: 0px 0px 1px #119af2;
   text-transform: uppercase;
 }
 
 .servicetable {
   border: 1px solid #000;
   list-style: none;
   padding: 2px;
   width: 49%;
   display: inline-block;
 }
 
 .kc_fab_main_btn {
   background-color: #F44336;
   float: right;
   width: 60px;
   height: 60px;
   border-radius: 100%;
   background: #F44336;
   border: none;
   outline: none;
   color: #FFF;
   font-size: 36px;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
   transition: .3s;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 .kc_fab_main_btn:focus {
   transform: scale(1.1);
   transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <h3>Header</h3>
</header>
<div class="container-fluid body-content">
  <ul>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/61.png" width="16px" border="0" alt="Sahil popli" /> front desk</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/210.png" width="16px" border="0" alt="Sahil popli" /> 24/7 International channels</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/201.png" width="16px" border="0" alt="Sahil popli" /> Shuttle service from/to the airport*</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/94.png" width="16px" border="0" alt="Sahil popli" /> Smoking/non-smoking rooms</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/50.png" width="16px" border="0" alt="Sahil popli" /> Doctor On Call</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/61.png" width="16px" border="0" alt="Sahil popli" /> front desk</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/210.png" width="16px" border="0" alt="Sahil popli" /> 24/7 International channels</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/201.png" width="16px" border="0" alt="Sahil popli" /> Shuttle service from/to the airport*</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/94.png" width="16px" border="0" alt="Sahil popli" /> Smoking/non-smoking rooms</li>
<li class="servicetable"><img src="http://i529.photobucket.com/albums/dd333/sahilpoply/50.png" width="16px" border="0" alt="Sahil popli" /> Doctor On Call</li>
  </ul>
</div>
<div>
</div>
<footer>
  <button class="kc_fab_main_btn">+</button>
  <h3>Footer</h3>
</footer>

Answer 4

＆＃13;

＆＃13;

.main {
    background: blue;
    width: 100%;
    height: 50px;
}
.body {
    margin-top: 25px;
    overflow: scroll;
    height: 100px;
    border: solid;
}

＆＃13;

<div class="main"><h1 align="center">Header</h1></div>
<div class="body">Lorem ipsum dolor sit amet, vehicula ullamcorper, pellentesque consequatur, euismod praesentium nulla. Maecenas sed, vestibulum orci. Turpis sapien sed ac et urna sit, eget lectus proin, class id magna penatibus turpis et nec, ante consectetuer a amet porta a eu, rutrum a mollis aliquam congue. Dictum neque. A magna velit, morbi proin ligula aliquam donec neque.
Lorem eget. Montes praesent auctor nec integer vel wisi, integer ut risus, ac dolor nullam et dolor vel. Turpis praesent, debitis sed amet potenti nec dolor suspendisse, dui feugiat condimentum mi neque at viverra, consectetuer elit ante praesent nulla wisi curabitur, accumsan nec eum suscipit sed sed scelerisque. Rhoncus non placerat dui. Laoreet ut elit hymenaeos amet ipsum, lobortis convallis accumsan. Tristique dolor viverra ipsum rhoncus dui, elit cras penatibus donec per wisi, at praesent nullam, elit lectus per est aliquam, class placerat lectus taciti adipiscing. Vivamus nulla tellus, velit nullam duis, pulvinar accumsan ullamcorper magna sodales sed. Pulvinar lectus adipiscing. Nec lectus, lectus vehicula integer facilisi, dignissim diam augue arcu laborum non consectetuer, est et urna ante consequat. Turpis eu. Tempor nec enim arcu amet molestie auctor, aliquam cum.</div>
<div class="main"><h1 align="center">Footer</h1></div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

#top
{
  //float: top;
  border: solid 1px green;
  width: 100%;
  background: #8BC34A;
  /*position: fixed;
  top: 0;*/
}

#mid
{
  margin-top: auto;
  margin-bottom: auto;
  border: solid 1px red;
  position: fixed;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: none;
  color:blue;
}

#bottom
{
  border: solid 1px blue;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: -10;
  background: #8BC34A;
}

<div id="top">top</div>
<div id="bottom">bottom</div>
<div id="mid">mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br>mid<br></div>