Question

这是我的css：

html{
  position: relative;
  height: 100%;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  min-height: 100%;
  margin-bottom: 60px;
}

.container {
  padding-top: 50px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

.footer p{
  line-height: 60px;
}

.messages {
  /*background-color: blue;*/
  min-height: 100% !important;
  height: 100% !important;
}

这是我的标记（使用blaze进行模板渲染）：

<template name="messages">
  <div class="container messages">
    <div class="row">
      <div class="col-md-3 conversations">
        {{> message}}
      </div>
      <div class="col-md-9 conversation-holder">
        <h1>John Doe</h1>
        <div class="conversation">

        </div>
      </div>
    </div>
  </div>
</template>

这是我的输出：

我想要的是会话列表和标题之间的界限（John Doe（右侧）应该是100％的高度，并且任何溢出都应该是可滚动的。

我已将min-height容器的height和.messages与!important设置为100％但不起作用我不知道原因。

如何100％完成？感谢。

P.S：这是渲染后的模板：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="__blaze-root">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <!-- navbar stuff removed for better understanding-->
    </nav>
    <div class="container messages">
      <div class="row">
        <div class="col-md-3 conversations">
          <a href="#">
          <div class="message">
            <div class="conversation-title">
              <img class="pull-left img-circle" height="50px" src="/images/dummy-profile-pic.png" width="auto">
              <p class="pull-left">John Doe</p>
            </div>
          </div></a>
        </div>
        <div class="col-md-9 conversation-holder">
          <h1>John Doe</h1>
          <div class="conversation"></div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <p class="text-muted">Place sticky footer content here.</p>
    </footer>
  </div>
</body>
</html>

Answer 1

刚才意识到你正在使用bootstrap框架。您必须将父div的高度级联到内部div，直到它到达.message元素。

否则，您无法将高度设置为100％。（中间div中的任何填充或边距都会引入垂直滚动）

小提琴显示身体标签下降100％至2级。

http://jsfiddle.net/skelly/zrbgw/

解决方案2：您必须将position:absolute用于.message

解决方案3：您可以使用position:fixed

但解决方案2＆amp; 3将删除内容流中的元素，导致需要设置正确的父高度。

无法在引导容器上设置100％的高度

1 个答案: