Question

+------------------+   <-- container - should not be stretched by its contents
|+----------------+|
||               |||
||               |||   <-- main div - as big as container minus footer
||               |||                  if content overflows, scrollbar appear
||               |||
||   scrollbar-> H||
||               H||
||               |||
|+----------------+|
|+----------------+|   <-- footer - stretched by its contents (button) to
||  [button]      ||                minimal needed height
|+----------------+|
+------------------+

容器可能没有静态大小，因此解决方案“只计算主div的高度”不是一个选项（当然没有JS）

HTML5，无需向后兼容。

Answer 1

在CSS3中，您可以使用

height: calc(100% - 60px);

60px可以代表页脚的高度。

Answer 2

尝试这样的事情：

/* css */

<style>
    .container{
        position: relative;
        height: 100%;
        width: 100%;
    }
    .main{
        position: relative;
        height: calc{100% - 10%};
        width: 100%;
        overflow: auto;
    }
    .footer{
        position: relative;
        height: 10%;
        width: 100%;
    }
</style>

<!-- html -->
<div class="container">
    <div class="main">
    </div>
    <div class="footer">
    </div>
</div>

Answer 3

你走了;仅使用html / flexbox：

您会注意到，在添加<p>标记时，在页脚div上，div会缩放到最大高度30％，并强制主div再次溢出内容。

在没有静态容器高度/宽度的情况下工作，猜测它取决于父容器。

首先：内容最少

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
.container{
    height:200px;
    width:400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }
.main{
    width:100%;
    background-color:blue;
    overflow-y: scroll;
    }
    .main p{
        color:white;
    }
.footer{
    max-height:30%;
    width:100%;
    background-color:red;
    }
</style>
</head>
<body>
<div class="container">
<div class="main">
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    </div>
<div class="footer">
    <span>Trump2016</span>

    </div>
</div>
</body>
</html>

＆＃13;

第二：添加内容（显示容器将扩展并强制主要部分）。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
.container{
    height:200px;
    width:400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    }
.main{
    width:100%;
    background-color:blue;
    overflow-y: scroll;
    }
    .main p{
        color:white;
    }
.footer{
    max-height:30%;
    width:100%;
    background-color:red;
    }
</style>
</head>
<body>
<div class="container">
<div class="main">
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p>
    </div>
<div class="footer">
    <span>Trump2016</span>
    <p>Trump2016</p>
  

    </div>
</div>
</body>
</html>

＆＃13;

Answer 4

检查这是否对您有所帮助。

我使用height: 100vh .container并将.footer拉上了负余额。

* {
  margin: 0;
}
.container {
  height: 100vh;
  box-sizing: border-box;
  padding-bottom: 50px;
  overflow: auto;
}
.footer {
  height: 50px;
  text-align: center;
  margin-top: -50px;
  background: #ccc;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 15px;
}

<div class="outer">
  <div class="container">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
</div>
<div class="footer">
  footer
</div>

使用可滚动内容垂直拆分DIV

4 个答案: