使用jQuery，CSS或兩者擴展DIV解決方案？

我有一個HTML頁面佈局 - 這樣的事情：使用jQuery，CSS或兩者擴展DIV解決方案？

<div id='header'> 
Header content 
</div> 

<div id='main_content'> 
some content 
</div>

在#main_content DIV的內容可以是很長的，或者，沒什麼旁邊（我用它作爲模板的一部分，整個站點）。

我想要的僅僅是視口的高度（減去上面頭部div的高度 - 但不需要獲取該值，爲便於討論，我們只需使用100px）。

我似乎無法通過純CSS做到這一點。不過，我想也許我可以每隔1秒觸發一次Javascript函數（大概也可以在resize事件中觸發它），檢查#main_content的高度，如果它不是至少（viewport_hight - 100），那麼將其設置爲（viewport_height -100）。

問題是，我不確定這是否可行，並且不確定是否有「更好的方法」。

有沒有人遇到過這個問題，並有一個很好的解決方案？

謝謝。

來源

2009-12-10 OneNerd

感謝您的反饋意見。這是我最終做的工作：

冷杉我用Firefox的純CSS。對於IE，使用它設置所希望的高度上文檔加載這個jQuery腳本（略作修改用於一般用途）

$(document).ready(
    function() { 
     // (I have some other not relevant code here as well in here) 
     if ($j.browser.msie){ setContentHeight(); } 
    } 
); 

function setContentHeight() { 
    // get viewport height 
    var viewportHeight = $(window).height(); 

    // if body div is not tall enough, make it minimum height 
    if (($('#body_content_div').height() - 275) < viewportHeight) { 
     var desiredHeight = viewportHeight - 275; 
     $('#body_content_div').css("height", desiredHeight + "px"); 
    } 

    // set this function to fire off 1x per second 
    // because ajax calls may re-populate the div at any time 
    setTimeout("setContentHeight()", 1000); 
}

函數被調用每秒1倍至佔調整大小和AJAX（可以調用上調整（）事件，但不會考慮阿賈克斯。

來源

2009-12-11 18:31:06 OneNerd

那麼我會告訴你..在30年來，我從來沒有使用過UI一個定時器來修復佈局..我永遠不會這樣做自己...但如果你很高興..善良 – 2009-12-11 22:41:06

不幸的是，這對於純CSS來說是不可能的。您將需要使用JavaScript。

我不確定爲什麼你需要每秒調用一次JavaScript函數。如果在調整大小事件觸發時以及頁面加載時調用它，則該應該是就足夠了。

來源

2009-12-10 20:22:24

因爲AJAX有時重新填充一個div – OneNerd 2009-12-11 18:19:05

你可以使用CSS min-height屬性嗎？如果需要，您仍然可以使用javascript計算值。

來源

2009-12-10 20:24:33

最小高度不能在IE工作〜那將是太容易 – OneNerd 2009-12-11 17:48:56

看看這個，我認爲它會幫助你： http://www.xs4all.nl/~peterned/examples/csslayout1.html

來源

2009-12-10 20:51:57 machineghost

這可以用CSS和高度= 100％得到解決..下面的代碼演示。這裏的標題是25px高（適用於所有當前瀏覽器）：

<div id='viewport' style='height:50%; padding-top: 25px; border: 4px solid green'> 
    <div id='header' style='margin-top: -25px'> 
     Header content 
    </div> 
    <div id="main_content" style='height: 100%; border: 1px solid red'> 
     some content 
    </div> 
</div>

來源

2009-12-10 21:06:41

使用jQuery，CSS或兩者擴展DIV解決方案？

回答

相關問題