流體，靜電，液體 - 3排佈置

好吧，我已經看到了static，fluid，靜態佈局，但現在我已經走到一個需要流體，靜電，流體佈局的設計。流體，靜電，液體 - 3排佈置

如：

+-------------------------------+ 
|    FLUID    | 
+-------------------------------+ 
|  I SHALL     | 
|   TAKE 400    | 
|    PIXELS   | 
+-------------------------------+ 
|    FLUID    | 
+-------------------------------+

我將如何實現這一純CSS？

值得注意的是，如果屏幕太小，流體行可能爲0像素。

至於我所嘗試的，還沒有 - 沒有線索什麼開始。

來源

2013-08-29 jolt

你爲什麼不做出100％的液體和像素的靜態一個剛開始時？ – Nitesh

「我會拿到400像素」這麼大聲地笑了！「流體行可能爲0像素」 – Razz

您可以在元素上使用display: table-row;。

see fiddle

來源

2013-08-29 12:08:40 Razz

「 – sinsedrix

試試這個simple layout structure

CSS

.wrapper{ 
    width:100%; 
} 
.fluid{ 
    width:auto; 
    background:red; 
    padding:20px; 
} 
.fixed{ 
    width:360px; 
    margin:0 auto; 
    background:green; 
    padding:20px; 
}

來源

2013-08-29 12:13:50 Nitesh

「流體行可能爲0像素」 – sinsedrix

其實，我設法與絕對定位圍繞破解我的方式。

HTML：

<div id="header"></div> 

<div id="content"></div> 

<div id="footer"></div>

CSS：

#header, #footer 
{ 
    background-color: blue; 
    position: absolute; 

    width: 100%; 
    height: 50%; 

    top: 0; 
    left: 0; 

    z-index: -1; 
} 

#footer 
{ 
    top: auto; 
    bottom: 0; 
} 

#content 
{ 
    height: 400px; 

    background-color: black; 

    position: absolute; 

    width: 100%; 
    left: 0; 

    top: 50%; 
    margin-top: -200px; 
}

雖然這一個工程，它似乎僅可使用3排的場景......或者，它會永遠不能回答無SQL世界着名的問題does it scale?。我的意思是，我懷疑這將適用於4排，其中三個是流動的，一個是min-height。

Fiddle.

來源

2013-08-29 12:13:53 jolt

流體，靜電，液體 - 3排佈置

回答

相關問題