流星：Flexbox的CSS工作中的jsfiddle但不是在應用

-1

我有了這個Flexbox的自動擴展的列CSS中的jsfiddle工作很好：http://jsfiddle.net/disgr4ce/91yfdb4z/1/流星：Flexbox的CSS工作中的jsfiddle但不是在應用

.fc { 
    display: -webkit-flex; 
    display: flex; 
} 

.fcRow { 
    -webkit-flex-direction: row; 
    flex-direction: row; 

    -webkit-justify-content: space-between; 
    justify-content: space-between; 

    -webkit-align-items: center; 
    align-items: center; 
} 

.fcColumn { 
    -webkit-flex-direction: column; 
    flex-direction: column; 

    height: 100%; 
} 

html, body { 
    margin:0px; 
    height: 100%; 
} 

#header { 
    background-color: #eee; 
    padding: 10px 10px; 
} 

.clickable { 
    cursor: pointer; 
} 

#chatLog { 
    -webkit-flex: 1 1 auto; 
    flex: 1 1 auto; 
    overflow-y: auto; 
    min-height: 0px; 

    padding:10px; 
} 

#chatFooter { 
    height: 40px; 
    padding:10px; 
    background-color: #eee; 

    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction:row; 
} 

.logInput { 
    padding: 10px 10px; 
}

不過，這並不在我的應用程序工作，儘管是字面上完全相同的CSS文件內容。當然，標記也是一樣的，但是使用流星模板系統和Flow-Layout，它只在頂層增加了一個額外的<div id="__flow-root">。唯一包含的內容是display:block;並且擺弄不會改變任何東西（爲了更好）。

還有什麼我可以檢查嗎？應用程序版本位於：http://campchat.meteor.com/room/9sCa5QfW6eqZmGQxW正如您所看到的，它不會像jsFiddle那樣擴展#chatlog。是什麼賦予了？

來源

2015-06-19 T3db0t

正如情況經常如此，這個問題的陳述導致我無情地回答：罪魁禍首確實是Flow-Layout的#__flow-root。我所要做的只是在那裏指定100%，而且一切都很好。現在，如果我只明白爲什麼;）

來源

2015-06-19 18:57:01 T3db0t

它仍然不是很完美，though- '＃chatLog'的高度影響頁眉和頁腳的高度; '＃chatLog'越長，這兩個div的高度越短... – T3db0t

在我的情況，而不是#__ flow-root，我不得不在#__ blaze-root上設置flex props（display，height和flex-direction），它包含整個文檔在體內。

如果您正在使用BlazeLayout，你也可以改變的根源是身體（或其他任意元素），並已應用彎曲的樣式，像這樣：

BlazeLayout.setRoot('body');

來源

2016-09-07 03:47:01 NamedDisplay

流星：Flexbox的CSS工作中的jsfiddle但不是在應用

回答

相關問題