Question

我正在尝试构建一个网页布局，其中有几个段落，后面是一个列表。

我希望页面是视口的高度，如果.lower太高而无法放在屏幕上，则要.lower滚动。

body {
    overflow: hidden;
}

.lower {
    max-height: 100vh;
    overflow-y: scroll;
}

但是，使用此CSS时，我的.lower太高，最后几个项目不可见。我想我希望.lower的高度为（伪代码）100vh - height(.upper)。

我可以使用CSS实现此布局吗？

body {
  overflow: hidden;
}
.lower {
  max-height: 100vh;
  border: 1px dotted red;
  overflow-y: scroll;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div class="upper">
    <p>hello world
    </p>
    <p>hello world again
    </p>
  </div>

  <div class="lower">
    <ul>
      <li>hello world 1</li>
      <li>hello world 2</li>
      <li>hello world 3</li>
      <li>hello world 4</li>
      <li>hello world 5</li>
      <li>hello world 6</li>
      <li>hello world 7</li>
      <li>hello world 8</li>
      <li>hello world 9</li>
      <li>hello world 10</li>
      <li>hello world 11</li>
      <li>hello world 12</li>
      <li>hello world 13</li>
      <li>hello world 14</li>
      <li>hello world 15</li>
      <li>hello world 16</li>
      <li>hello world 17</li>
      <li>hello world 18</li>
      <li>hello world 19</li>
      <li>hello world 20</li>
      <li>hello world 21</li>
      <li>hello world 22</li>
      <li>hello world 23</li>
      <li>hello world 24</li>
      <li>hello world 25</li>
      <li>hello world 26</li>
      <li>hello world 27</li>
      <li>hello world 28</li>
      <li>hello world 29</li>
      <li>hello world 30</li>
    </ul>
  </div>
</body>

</html>

Answer 1

如果对上部元素使用固定（已知）高度是可以接受的，那么您可以使用calc()：

Demo

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.upper p {
  line-height: 20px;
  margin: 20px 0;
}

.lower {
  height: calc(100% - 100px);
  border: 1px dotted red;
  overflow-y: scroll;
  box-sizing: border-box;
}

我已经避免直接使用vh .lower因为在CSS calc（）中使用时出现问题。

Answer 2

使用[NSURL isFIFEUrl]执行此操作非常简单。注意，添加了一个容器div。

[NSURL isFILEUrl]

jsfiddle

＆＃13;

Google/Sign 1.0.7

＆＃13;

flexbox

＆＃13;

Answer 3

你走了：

html, body {
    position: fixed;
    height: 100%;
    width: 100%;
    display: block;
    top: 0px;
    left: 0px;
}
.lower{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}

现在，此.lower元素符合视口的大小。但我不确定这是不是你想要的。如果我弄错了，请告诉我。

Answer 4

我要做一些假设：您的浏览器位于小屏幕媒体上并且滚动条不可见，这就是您无法查看最后几个项目的原因。。您是否尝试在.body中将隐藏更改为自动溢出，并在.lower中将滚动更改为可见（以便不依赖滚动条功能）？

如何强制嵌套div完全适合父级？

4 个答案: