Div高度：2格之間的100％

基本上我有3格。頂部，中部，底部。頂部有60px的高度; 底部有60px的高度; 我希望中間是Top和Bottom之間的高度。我嘗試了height: 100%;，但它似乎沒有工作。Div高度：2格之間的100％

如果我設置的高度爲.middle它不會做任何事情。如果我決定放一個height : 10px;或填充它會顯示出於某種原因。

HTML代碼：

html, 
 
body{ 
 
    height:100%; 
 
\t background-color: #181818; 
 
\t margin: 0 auto; 
 
\t position: relative; \t 
 
} 
 

 
.nopadding { 
 
\t padding: 0 !important; 
 
\t margin: 0 !important; 
 
} 
 

 
.topbanner { 
 
\t background-color: #282828; 
 
\t display:block; 
 
    height: 76px; 
 
} 
 

 
.leftbanner { 
 
\t background-color: #282828; 
 
\t height: 100%; 
 
} 
 

 
.middlebanner { 
 
\t background-color: #181818; 
 
\t height: 100%; 
 
\t 
 
} 
 

 
.rightbanner { 
 
\t background-color: #282828; 
 
\t height: 100%; 
 
} 
 

 
.bottombanner { 
 
\t background-color:#282828; 
 
\t height: 60px; 
 
\t \t position: absolute; 
 
\t width: 100%; 
 
    bottom: 0px; 
 
    left: 0; 
 
} 
 

 
.middle{ 
 
\t height: 100%; 
 
} 
 

 
.row { 
 

 
}

<div class="container-fluid"> 
 
\t \t <div class="top" id="header"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="topbanner"> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="middle" id="middle"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-2 nopadding"> 
 
\t \t \t \t \t <div class="leftbanner"> 
 
\t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-8 nopadding"> 
 
\t \t \t \t \t <div class="middlebanner"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-md-2 nopadding"> 
 
\t \t \t \t \t <div class="rightbanner"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="bottom" id="footer"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="bottombanner"> 
 
\t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

來源

2016-07-26 Ricy Gum

[html5：固定頂部/底部和可滾動中間的三行flexbox的可能的重複]（http://stackoverflow.com/questions/19477707/html5-thre e-rows-flexbox-with-fixed-top-bottom-and-scrollable-middle） –

請不要使用答案中的代碼更新您的問題。 – nicael

請不要這樣做，問題應該只顯示***原來的問題***。 – nicael

calc()將在那裏工作。

height:calc(100% - 120px);

或者你可以fix'ed該專區位置：

div { 
    position:fixed; 
    right:0; left:0; 
    bottom:60px; 
    top:60px; 
}

來源

2016-07-26 18:06:31 nicael

增加的高度：calc（100％-120px）;到midmid類。似乎沒有工作 –

min-heigth：calc（100vh - 120px）; –

如果你想讓所有瀏覽器同步，對calc的支持是不夠的 – Martijn

你可以使用Flex盒模型（https://www.w3.org/TR/css-flexbox/），這是排序的旨在解決您要的那種問題解決：

.container-fluid { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
} 

.top, .bottom { 
    height: 60px; 
} 

.middle { 
    height: 100%; 
}

只要記住，body和html最初有自動高度，所以即使你的.container-fluid指定height: 100%，它將不得不在最初「緊湊」的文檔主體的實際高度內，就像html元件一樣。嘗試html, body { height: 100%; }大小（雙關語意）。

柔性盒模型還爲您提供了可能性來定義你的Flex項目（一柔性容器這與display: flex最近的父的孩子，在這種情況下.container-fluid元素）如何作出反應，它們的內容增大或縮小。

最後，通常的免責聲明：支持彈性盒大大改進，但可能不符合您的喜好，根據您的項目限制評估其可行性。

來源

2016-07-26 18:17:31 amn

與Flex模型，flex:1;是你可能想知道的規則：

例如用一個簡單的模板（飼料每一件與你的內容和自己的樣式）

html, 
 
body { 
 
    height: 100%; 
 
    background-color: #181818; 
 
    margin: 0 auto; 
 
    color:white; 
 
} 
 
header, 
 
footer, 
 
aside { 
 
    background: #282828 
 
} 
 
/* layout */ 
 

 
body, 
 
main { 
 
    display: flex; 
 
    flex: 1; 
 
    /* should show a scrollbar ? if yes then */ 
 
    overflow:auto; 
 
} 
 
body { 
 
    flex-flow: column; 
 
} 
 
header, 
 
footer { 
 
    min-height: 60px; 
 
    /* height: 60px; or 
 
    whatever, but it can just grow from content if you wish without height nor min-height*/ 
 
} 
 
section { 
 
    width: 75%; 
 
    height: 100%; 
 
} 
 
aside { 
 
    flex: 1; 
 
} 
 

 
/* see me **/ 
 
* {box-shadow: 0 0 0 1px;}

<header>your head stuff here</header> 
 
<main> 
 
    <aside> 
 
    on left 
 
    </aside> 
 
    <section> 
 
    on middle 
 
    </section> 
 
    <aside> 
 
    on right 
 
    </aside> 
 
</main> 
 
<footer> 
 
    footer stuff 
 
</footer>

來源

2016-07-26 18:52:34

Div高度：2格之間的100％

回答

相關問題