Question

在这里，我准备了一个jsfiddle来展示我所处的情况：你看到一个简单的标题，内容，页脚结构。

内容容器内部是一个信使，应该伸展到MAX 100％的高度。高于100％的高度它应该滚动 - 就是它。

已编辑：100％内容高度表示：内容容器在页眉和页脚之间拉伸。因此页眉和页脚始终可见。 Content-container也在它们和内容容器内的信使之间延伸，但当信息内容（消息）增长时，信使开始滚动。

但是：页脚有一个特殊的＆＃39;行为：只要它不到达内容容器内的内容，只要内容小于100％的高度，它就是粘性的。

抱歉 - 我无法发布链接到我的小提琴，因为stackoverflow在这里非常错误，其愚蠢的＆＃34; jusfiddle链接必须通过代码完成＆＃34;

＆＃13;

/*BASIC STRUCTURE*/

* {
  padding: 0;
  margin: 0;
}

html {
  height: 100%
}

body {
  min-height: 100%;
  position: relative;
  font-family: arial;
  color: #FFF;
}

.wrapper {
  height: 100%; /*not working without set position absolute*/
  width: 100%;
}

.header {
  background: #2980b9;
  text-align: left;
  min-height: 70px; /*Height must be flexible*/
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
}

.content-container {
  background: #336E7B;
  max-width: 1010px;
  text-align: left;
  margin: 0 auto;
  padding: 40px 10px 40px 10px;
}

.footer {
  background: #2980b9;
  padding: 10px 0 10px 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

p {
  padding: 10px;
}


/*END BASIC STRUCTURE*/


/*MESSENGER STRUCTURE*/

.messenger-container {
  display: flex;
}

.my-contacts {
  flex: 1 1 0;
  min-width: 275px;
  background: #FFF;
  color: #000;
  overflow-y: auto;
  height:100%; /*not working yet */
}

.message-window {
  background: #333;
  overflow-y: auto;
  flex-grow: 1;
  height:100%; /*not working yet*/
}

.single-message {
  background: #FFF;
  color: #000;
  margin: 10px;
  height: 200px;
}

.input-field-dummy{
  background: #F00;
}
https://jsfiddle.net/25vrsr2m/
/*END MESSENGER STRUCTURE*/

＆＃13;

<div class="wrapper"> <!--maybe remove the wrapper?-->
  <div class="header">HEADER - flexible height</div>
  <div class="content-container">
  MESSAGE CONTAINER
    <div class="messenger-container">    
      <div class="my-contacts">
        <p>CONTACT 1</p>
        <p>CONTACT 2</p>
        <p>CONTACT 3</p>
        <p>CONTACT 4</p>
        <p>CONTACT 5</p>
        <p>CONTACT 6</p>
      </div>
      <div class="message-window">
        <div class="single-message">Single message</div>
        <div class="single-message">Remove me and resize window from large to small multiple times to see footer behavior</div>
        <div class="single-message">Remove me and resize window from large to small multiple times to see footer behavior</div>
        <p class="input-field-dummy">
  INPUT FIELD GOES HERE - always sticky at the bottom of message window.
  </p>
      </div>
    </div>
  </div>
  <div class="footer">FOOTER - always at the bottom, sticky until it reaches content of content-container, then it stays below</div>
</div>

<!--
Here goes my js and css before body ends
-->

＆＃13;

Answer 1

尝试： height：calc（100％-heightoffooter + header）和溢出滚动ofc

如果您的标题是动态的，就像您说的那样可以使用JS

我需要一个具有特殊页脚和内容行为的全高容器

1 个答案: