無法設置100％的高度上引導容器

這是我的CSS：無法設置100％的高度上引導容器

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; 
}

這是我的標記（使用模板渲染火焰）：

<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>

這是我的輸出：

我想要的是對話列表和標題（Jo hn Doe（右側）應該是100％的高度，並且任何溢出都應該是可滾動的。

我已經設置了min-height和.messages容器height爲100％，與!important，但它不工作，我不知道爲什麼。

我該如何使它成爲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>

來源

2016-06-07 Mohammad Areeb Siddiqui

只有對父母「絕對」的元素可以被賦予高度「100％」。我只能看到頁腳被定位爲「絕對」。 – Crowes

@JoshCrowe所以我應該首先將絕對定位應用於容器，然後應用到行，然後到對話持有人？ –

剛剛意識到你正在使用引導程序框架。您必須將父div的高度級聯到內部div，直到達到.message元素。

否則，您無法將高度設置爲100％。（中間div中的任何填充或邊距都會引入垂直滾動）

從身體標記顯示100％降到2級的小提琴。

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

解決方案2：你必須使用position:absolute爲.message

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

但溶液2 & 3將移除元件出導致所述內容流的需要設置合適的父母身高。

來源

2016-06-07 20:01:46

所以你說我應該首先將絕對定位應用於容器，然後是行，然後是對話持有人？ –

@MohammadAreebSiddiqui絕對div將基於它周圍的相對div進行操作...即使body標籤也可以有相對的..但是當.message div嵌套到這個級別時，您無法期望團隊中的每個人都有風險會知道的。身體與消息關係 –

您可以將會話設置爲絕對，並使用Javascript設置.message高度 –

無法設置100％的高度上引導容器

回答

相關問題