Question

我想创建一个书写区域和一个消息区域，我将容器放在窗口的当前高度上，但是当我尝试将容器分成两部分时，内部容器不会填满外部容器。

问题：如何让#message元素符合#chatContainer减去#writingBox高度？

＆＃13;

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #393939;
    font-family: 'Lato', sans-serif;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#chatContainer {
    cursor: default;
    position: relative;
    height: auto;
    min-height: calc(100% - 54px);
    padding: 54px 0 0 0;
    background: lightgray;
}

#messages {
    cursor: default;
    position: relative;
    height: auto;
    min-height: calc(100% - 54px);
    background: lightgreen;
}

#writingBox {
    border-top: 1px solid #393939;
    height: 54px;
    background: lightblue;
}

＆＃13;

<div id="chatContainer">
  <div id="messages"></div>
  <div id="writingBox">
    <div id="newMessage">
    </div>
  </div>
</div>

＆＃13;

Answer 1

问题是，如果父容器上只设置了最小高度，则无法设置高度。

您可以使用flexbox来实现您的目标：

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  color: #393939;
  font-family: 'Lato', sans-serif;
}

#chatContainer {
  cursor: default;
  position: relative;
  min-height: 100%;
  padding: 54px 0 0 0;
  background: lightgray;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

#writingBox {
  border-top: 1px solid #393939;
  height: 54px;
  background: lightblue;
}

#messages {
  cursor: default;
  position: relative;
  background: lightgreen;
  flex-grow: 1;
}

<div id="chatContainer">
  <div id="messages"></div>
  <div id="writingBox">
    <div id="newMessage">
    </div>
  </div>
</div>

Answer 2

您可以将#chatContainer的高度设置为calc（100％ - 55px），将#messages的高度设置为calc（100％ - 55px）

＆＃13;

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #393939;
    font-family: 'Lato', sans-serif;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#chatContainer {
    cursor: default;
    position: relative;
    height: calc(100% - 55px);
    min-height: calc(100% - 55px);
    padding: 54px 0 0 0;
    background: lightgray;
}

#messages {
    cursor: default;
    position: relative;
    height: calc(100% - 55px);
    background: lightgreen;
}

#writingBox {
    border-top: 1px solid #393939;
    height: 54px;
    background: lightblue;
}

＆＃13;

<div id="chatContainer">
  <div id="messages"></div>
  <div id="writingBox">
    <div id="newMessage">
    </div>
  </div>
</div>

＆＃13;

Answer 3

在100%中将100vh更改为min-height。

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #393939;
    font-family: 'Lato', sans-serif;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

#chatContainer {
    cursor: default;
    position: relative;
    height: auto;
    min-height: calc(100vh - 54px);
    padding: 54px 0 0 0;
    background: lightgray;
}

#messages {
    cursor: default;
    position: relative;
    height: auto;
    min-height: calc(100vh - 108px);
    background: lightgreen;
}

#writingBox {
    border-top: 1px solid #393939;
    height: 54px;
    background: lightblue;
}

<div id="chatContainer">
  <div id="messages"></div>
  <div id="writingBox">
    <div id="newMessage">
    </div>
  </div>
</div>

为什么innerContainer没有填充外部容器？

3 个答案: