垂直流動佈局

這是我需要實現http://imm.io/16BQK 垂直流動佈局

裏面的包裝元素的佈局我有3行。頂部和底部行的高度與普通塊元素一樣高 - 與內容一起展開。

中間塊應該佔據其餘空間。

如果我知道頂部和底部塊的高度，我可以使用display: table-row。但是，如果只有這種可能，我希望能夠實現這種自動化。

我很好JS的位，但我不知道怎麼做，在優雅的方式，考慮到我想有這種動態的（中間組件調整大小時，頁眉/頁腳改變他們的高度）。

來源

2013-05-19 Guard

'位置：absolute'底部塊？ – Salman

如果中間塊的內容不適合它呢？溢出？ –

@AxelAmthor是的。更準確地說，它將包含另一個將具有100％高度和溢出的.scroll包裝器：滾動。想想帶有頁眉和頁腳的電子郵件列表，完整的控件 – Guard

我不明白爲什麼你不能做到這一點與display: table-row，所有你需要做的就是設置display: table上都需要進行內部div的包裝div和display: table-row。然後將中間的div設置爲100%高。這將確保頂部和底部的div只與其內容一樣高，中間的div將填滿剩餘的空間。它的行爲完全像HTML table。

這裏有一個jsFiddle

.wrapper { 
    display: table; 
    height: 200px; 
    width: 100%; 
} 
.header, .footer, .content { 
    display: table-row; 
    width: 100%; 
    background-color: #EFEFEF; 
} 
.content { 
    height: 100%; 
    background-color: #FFF; 
}

來源

2013-05-19 22:22:43

這顯然不起作用。高度不固定，整個表擴展到需要的有效高度：http://jsfiddle.net/HHdJa/ –

@AxelAmthor - 我有點錯過了OP想要在中間行內滾動的點，因爲我沒有讀全部對問題的評論，但這是一個簡單的解決方法：http://jsfiddle.net/HHdJa/1/。 –

@AxelAmthor - 我確定OP可以做到這一點，事實上OP在評論中提到它會做，因爲你在整個桌子上的角度擴展到所需的有效高度，你不應該做出最高的底部的div比桌子的整個高度佔用更多的空間，因爲這樣做是沒有意義的。我認爲可以肯定的是，頂部和底部div的組合內容的高度不會超過桌子的高度。在這種情況下，該解決方案工作得很好。 –

-1

需要一些DHTML，由於內框不會縮小/自動擴展：

<div id="wrapper" style="position:relative; top:0; width:300px; 
border:1px solid black; left:0; height:550px;"> 
    <div id="topdiv" style=" 
    border:1px solid red;">lorem ipsum...</div> 
    <div id="main" style="border:1px solid green;"> 
     <div id="content" style="overflow:scroll;">lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ... lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor</div> 
    </div> 
    <div id="bottomdiv" style="position:absolute; 
    border:1px solid blue; left:0px; bottom:0px;display:block;width:100%;">lorem ipsum dolor site...<br>lorem ipsum dolor site... 
     </div> 
</div>

和

function setSizes() 
{ 
    var topHeight = $("#topdiv").height(); 
    var bottomHeight = $("#bottomdiv").height(); 
    var mainHeight = $("#wrapper").height() - topHeight - bottomHeight; 
    //alert(mainHeight); 
    $("#content").height(mainHeight - 5); 
} 

setSizes();

http://jsfiddle.net/tMNh2/2/

高度/更正取決於邊界等，並只是一個例子，可能需要一些改進。

來源

2013-05-19 21:31:15

>我很滿意JS的一些部分，但我不確定如何以優雅的方式做到這一點，考慮到我希望有這種動態（當頁眉/頁腳改變它們的高度時，中間塊調整大小）。 – Guard

每當頂部或底部內容發生變化時，您可以調用setsizes（）。 –

感謝downvoter沒有一個更好的主意。問題是實際的高度是未知的，甚至剩下的高度可能會變成負值。這可以恕我直言，不能由CSS獨力擺弄。 –

垂直流動佈局

回答

相關問題