自動調整一個div在另一個

我有一個標題和容器div內的內容div。我希望頭部的高度被固定，內容div佔據容器div的其餘部分。簡單的解決方案是將內容div的高度設置爲（容器標題）像素。有沒有一種替代方法呢？自動調整一個div在另一個

div.container { height: 300px; width: 100%;} 
div.container h2 { height: 15px } 
div.container div.content { height: ?? }

來源

2010-09-21 Amrit

爲什麼你想這樣做另一種方式？ – 2010-09-21 12:48:05

使用像LESS/Sass這樣的預處理器會使樣式表從長遠來看更易於維護。這個想法是，程序員不想跟蹤精確的像素數量，而是希望樣式表本身記住。 – Dragontamer5788 2010-09-21 12:58:25

我不相信你可以用簡單的CSS做到這一點。但是，使用像LESS或Sass這樣的CSS預處理器時，實現起來並不重要。 LESS和Sass都對變量的支持，所以你可以做這樣的事情：

@total-height: 300px; 
@h2-height: 15px; 

div.container { height: @total-height; width: 100%;} 
div.container h2 { height: @h2-height} 
div.container div.content { height: @total-height - @h2 }

注：我沒有編譯/測試此代碼。但你明白了。

來源

2010-09-21 12:55:20 Dragontamer5788

使用預處理器似乎是個好主意。你知道任何可以與IIS上託管的.net項目一起使用嗎？ – Amrit 2010-09-21 14:42:11

首先，您不需要將div.container的寬度設置爲100％。你可以免費獲得。其次，如果容器的高度是固定的，那麼從容器（300px）中減去標題（15px）就是簡單的算術運算。簡單很好。

如果你的容器的高度不固定的，你可以試試絕對或相對定位的內容div的底部釘到父的底部（例如，bottom: 0px）。但你在這裏顯然不需要這個。

來源

2010-09-21 12:51:25 Robusto

自動調整一個div在另一個

回答

相關問題