时间戳

首页 > 解决方案 > CSS 全高，div 分配剩余空间

html - CSS 全高，div 分配剩余空间

问题描述

我正在构建一个带有标题、描述和答案的消息框。我已经为此苦苦挣扎了好几天，甚至用 Codepen 玩过，但无法正确处理这个问题。

我需要：

代码笔链接 

<div class="demoContainer">
  <div class="page">
    <div class="title">
      <h1>My awesome title that is so long i will move everything down</h1>
      <button>Some stuff to click</button>
    </div>
    <div class="row">
      <div class="colLeft">
        <div class="description">
          <h2>Author</h2>
          <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        </div>
        <div class="between">
          <p>Answers</p>
        </div>
        <div class="messages">
          <ul>
            <li>
              toto
            </li>
            <li>
              tAta
            </li>
            <li>
              tAta
              tAta
            </li>
            <li>
              tAta
            </li>
            <li>
              tAta
            </li>
            <li>
              tAta
            </li>
            >
            <li>
              tAta
            </li>
            >
            <li>
              tAta
            </li>
            >
            <li>
              tAta
            </li>
            >
            <li>
              tAta
            </li>
          </ul>
        </div>
        <div class="input">
          <textarea placeholder="Input height adapt to size until a maximum"></textarea>
        </div>
      </div>
      <div class="colRight">
        <ul>
          <li>
            some
          </li>
          <li>
            stuff
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="divider"></div>
  <div class="page">
    <div class="title">
      <h1>My awesome short title</h1>
      <button>Some stuff to click</button>
    </div>
    <div class="row">
      <div class="colLeft">
        <div class="description">
          <h2>Author</h2>
          <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        </div>
        <div class="between">
          <p>Answers</p>
        </div>
        <div class="messages">
          <ul>
            <li>
              toto
            </li>
            <li>
              tAta
            </li>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
          </ul>
        </div>
        <div class="input">
          <textarea placeholder="Input height adapt to size until a maximum"></textarea>
        </div>
      </div>
      <div class="colRight">
        <ul>
          <li>
            some
          </li>
          <li>
            stuff
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.demoContainer {
  display: flex;
  flex-direction: row;
}

.divider {
  width: 8px;
}

.page {
  height: 600px;
  width: 550px;
  background-color: lightgrey;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.title {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  max-height: 200px;
}

.title button {
  width: 90px;
  height: 30px;
}

.row {
  display: flex;
  /*flex: 1 1 100%;*/
  min-height: 0;
  height: 100%;
}

.colLeft {
  flex: 3 1 auto;
  min-height: 0;
  height: 100%;
  border: 1px solid blue;
  display: block;
  flex-direction: column;
  position: relative;
  /*align-items: stretch;
      align-content: stretch;*/
}

.description {
  border: 1px dashed black;
  /*flex: 4 1 100%;*/
  max-height: 60%;
  overflow: scroll;
}

.between {
  border: 1px solid green;
  height: 1, 1em;
}

.between>p {
  margin: 0;
}

.messages {
  border: 1px dashed red;
  /*flex: 2 100 auto;*/
  overflow: scroll;
}

ul {
  max-width: 100%;
}

.input {
  width: 100%;
  min-height: 1rem;
  flex: 1 1 3rem;
  display: flex;
  border: 1px solid yellow;
  position: relative;
  bottom: 0;
}

.input>textarea {
  width: 100%;
}

.colRight {
  flex: 1 1 auto;
  border: 1px solid black;
  min-width: 150px;
  overflow: scroll;
}

右边是我想要的一个简短示例，但删除<br/>以查看问题。

我试过了display: grid，isplay: block display: flex。我似乎找不到任何能满足我需求的东西。

我的问题是：这可能吗？仅使用 CSS？

标签： htmlcss

解决方案

对于每个想知道的人，我在研究 css 时发现了一些东西。

首先，如果另一个元素在其中，您可以在 div 上设置 100% 的高度以占用可用空间，但当且仅当您设置父元素时display: flex;！考虑到这一点，它就变得更容易了。

在那之后，我决定深入研究 JS，因为我的问题似乎不能仅用 CSS 解决。我利用了“新”position: sticky;属性，我的 JS 可以根据滚动位置来处理它top: 0;的bottom: 0;位置。

CSS 添加：

    .stickyBottom{
      position: sticky;
      bottom: 0;
    }
    .stickyTop{
      position: sticky;
      top: 0;
    }

JS代码添加：


    var colLeft = document.getElementsByClassName("messagesInput")[0];
    colLeft.onscroll = function(){myFunction()};
    // Get the navbar
    var between = document.getElementsByClassName("between")[0];
    var desc = document.getElementsByClassName("description")[0];

    // Get the offset position of the navbar
    var sticky = between.offsetTop;
    //between.classList.remove("stickyBottom")

    function myFunction() {
      if (colLeft.scrollTop >= sticky) {
         between.classList.remove("stickyBottom")
        between.classList.add("stickyTop")
      } else {
           between.classList.add("stickyBottom")
     between.classList.remove("stickyTop");
      }
    }

它最终以一种比我最初想要的更好的方式结束了用户体验！:) CodePen 链接相应更新。

推荐阅读