製作包裝採取一切視頭之後

所以基本上我想有以下結構：標題 - 固定的寬度，div.wrapper - 採取一切剩餘視頭之後（例如，如果頭是100px的高度，我總視口的高度是900px我想要.wrapper的高度是800px）。然後我有一個沒有固定高度的腳註，這個腳註必須在打包器後立刻提供。製作包裝採取一切視頭之後

這裏是我的代碼：

<body> 
    <header> 

    </header> 

    <div class="wrapper"> 

    </div> 

    <footer> 
    <P>FOOTER</P><P>FOOTER</P><P>FOOTER</P><P>FOOTER</P> 
    </footer> 
</body>

CSS：

body {min-height:100%; width:100%;} 

header { 
    height:50px; 
    background:red; 
    width:100%; 
} 

.wrapper { 
    height:100%; 
} 

footer { 
    background-color:green; 

}

的jsfiddle：https://jsfiddle.net/xwckn1kn/3/

.wrapper {height:100%}不工作。

來源

2016-07-14 kulan

由於頁腳應該是視口下方開始，我們可以使用calc作爲標題是一個已知的高度

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    min-height: 100%; 
 
} 
 
header { 
 
    height: 50px; 
 
    background: red; 
 
} 
 
.wrapper { 
 
    height: calc(100vh - 50px); 
 
    background: blue; 
 
} 
 
footer { 
 
    background-color: green; 
 
}

<body> 
 
    <header> 
 

 
    </header> 
 

 
    <div class="wrapper"> 
 

 
    </div> 
 

 
    <footer> 
 
    <P>FOOTER</P> 
 
    <P>FOOTER</P> 
 
    <P>FOOTER</P> 
 
    <P>FOOTER</P> 
 
    </footer> 
 
</body>

來源

2016-07-14 11:47:28

我不需要頁腳中可以看出，它只能用滾動顯示。 – kulan

更新該內容。 –

是的，工作。 – kulan

製作包裝採取一切視頭之後

回答

相關問題