Question

我有一个带有大列表的div，我只想（滚动）查看适合屏幕的元素数量。所以我不知道如何将div的高度调整到屏幕的底部边框。

我必须使用JS吗？

Answer 1

如果上面有固定尺寸。您可以使用CSS Calc来填充其余部分。

.test {
  height:300px;
  width: 100%
  background-color:yellow;
 }
 
.full-height {
  height: calc(100vh - 300px);
  background-color:red;
  }

<div class="test"></div>
<div class="full-height">
</div>

更好的解决方案是使用包装器。像这样：

.wrapper {
  background-color:red;
  height: 100vh;
}

.list {
  background-color: white;
  width: 100%
}

<div class="wrapper">
  <div class="list">
    <ul>
      <li>This</li>
      <li>is</li>    
      <li>a</li>    
      <li>list</li>
    <ul>
  </div>
</div>

Answer 2

根据屏幕尺寸，应用媒体查询样式。例如Footer希望成为最底层，我们将其用于所有浏览器

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;   /* Always make footer in bottom at any screen */
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS-将高度调整到屏幕底部

2 个答案: