Question

我有一个特殊的html结构，可模拟带有页面的应用程序结构。

请先访问JsFiddle以了解问题。

.screen-emulator {
  width: 300px;
  height: 400px;
  background-color: red;
}

.head {
  width: 100%;
  height: 70px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: violet;
}

<div class="screen-emulator">
  <div class="head">Head</div>
  <div class="body">
    <div class="page">
      <div class="page-test">page-test</div>
    </div>
  </div>
</div>

所以我的问题是：css中是否有办法让.page-test直到屏幕结束，而不是直到他的父母（.page）结束？

这里的问题是来自height: 100%;的{{1}}属性，该属性会一直持续到.page-test底部。我更愿意指定我将无法更改HTML结构（即使它解决了问题），并且我事先不知道.page的高度。

Answer 1

如果我正确理解了这个问题，我认为flexbox是答案。

首先明确地将所有元素的边距设置为零（有时称为引导），这将覆盖浏览器应用的所有默认用户代理样式。

将.screen-emulator的高度设置为100vh，并使其成为flexbox容器。您不想更改.head的未知高度，因此我们设置flex: none;。 .body是唯一具有flex: 1;剩余可用高度的弹性项目。 https://css-tricks.com/boxes-fill-height-dont-squish/

body,
.screen-emulator,
.head,
.body,
.page,
.page-test {
  margin: 0;
  padding: 0;
}

.screen-emulator {
  width: 300px;
  height: 100vh;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  background-color: blue;
  flex: none;
}

.body {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: violet;
}

<div class="screen-emulator">

  <div class="head">
    <h1>Head</h1>
    <p>Random content</p>
  </div>
  <div class="body">
    <div class="page">

      <div class="page-test">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis egestas. Massa tincidunt dui ut ornare lectus sit amet. Posuere ac ut consequat
          semper viverra nam libero justo laoreet. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Phasellus vestibulum lorem sed risus. Congue eu consequat ac felis donec et odio pellentesque diam. Consectetur lorem donec massa sapien faucibus

        </p>
        <p>
          Nisl suscipit adipiscing bibendum est ultricies integer quis. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Netus et malesuada fames ac turpis egestas. Ultricies mi quis hendrerit dolor magna eget. Tellus mauris
          a diam maecenas sed enim. Turpis massa tincidunt dui ut ornare lectus sit. Dolor magna eget est lorem ipsum. Sit amet consectetur adipiscing elit ut. Id donec ultrices tincidunt arcu non sodales. Interdum consectetur libero id faucibus nisl

        </p>

      </div>

    </div>
  </div>


</div>

Answer 2

.page-test {position: absolute;bottom: 0;width: 100%; height: 50%;background-color:violet;}

这是您要找的东西吗？我更改了您的身高，以便更好地在JsFiddle中显示

Answer 3

这是你的意思吗？

您可以基于视图高度vh计算。请注意，旧浏览器不支持calc。

已更新为新规范

由于要求是为了满足.head元素的动态高度，因此您将需要JavaScript来完成此操作。 CSS并非旨在从DOM获取值然后应用它。这就是为什么我们有JavaScript

document.addEventListener('DOMContentLoaded', function() { resizePage(); }, false); document.addEventListener("resize", resizePage); function resizePage() { var head = document.querySelector(".head"); var pageTest = document.querySelector(".page-test"); pageTest.style.height = "calc(100vh - " + head.offsetHeight + "px)"; }

.screen-emulator { width: 300px; height: 400px; background-color: red; } .head { width: 100%; height: 70px; background-color: blue; } .body { width: 100%; height: 100%; overflow-y: auto; } .page { position: relative; width: 100%; height: 500px; background-color: black; } .page-test { position: absolute; width: 100%; height: 100vh; background-color: violet; }

<div class="screen-emulator"> <div class="head">Head</div> <div class="body"> <div class="page"> <div class="page-test">page-test</div> </div> </div> </div>

Answer 4

您可以将min-height中的height或.page-test设置为100vh。这将忽略父div的任何高度，并占据屏幕的高度（如果您不介意溢出的话）

更新css

.page-test {
  position: absolute;
  width: 100%;
  /* min-height: 100vh; */
  height: 100vh;
  background-color: violet;
}

Answer 5

如果我理解您的问题，您想更改div的顺序。几天前，我使用Bootstrap做了一些移动视图，

@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}


<div class="row">
  <div class="col-xs-12">
    <div>This one is in Desktop view at the top, and in mobile at the end</div>
    <div>This one is at Desktop View at the End, and in mobile at the top</div>
  </div>
</div>

您可以根据需要调整此代码。那是你的问题吗？

使div在屏幕底部而不是父级底部

5 个答案: