設置DIV HIGHT各自通過jQuery

屏幕高度的我已被告知用JS來解決我的問題：設置DIV HIGHT各自通過jQuery

我的問題是，我有2個div的內容和側欄設置爲100％的高度，我有一個頁腳位於下方。

我的問題是，在我的筆記本電腦上，我希望頁面不顯示滾動條和全頁面顯示3，如果有更多的數據，頁面將需要滾動。

我怎樣才能確定我的屏幕分辨率決定的div高度？

來源

2011-09-16 Jess McKenzie

你可以在純HTML/CSS中做到這一點 - 不需要JavaScript。

你所追求的是一個跨瀏覽器粘腳。

從http://www.cssstickyfooter.com/得出以下幾點：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      html, body { 
       height: 100%; 
       padding: 0; 
      } 

      #wrap { 
       min-height: 100%; 
      } 

      #main { 
       overflow:auto; 
       padding-bottom: 150px; /* must be same height as the footer */ 
      } 

      #footer { 
       position: relative; 
       margin-top: -150px; /* negative value of footer height */ 
       height: 150px; 
       clear:both; 
      } 

      /*Opera Fix*/ 
      body:before { 
       content:""; 
       height:100%; 
       float:left; 
       width:0; 
       margin-top:-32767px;/ 
      } 
     </style> 
     <!--[if !IE 7]> 
     <style type="text/css"> 
      #wrap {display:table;height:100%} 
     </style> 
     <![endif]--> 
    </head> 
    <body> 
     <div id="wrap"> 
      <div id="main"> 
       <div id="content"> 
        <!-- Main content here --> 
       </div> 
      </div> 
     </div> 
     <div id="footer"> 
      <!-- Footer content here --> 
     </div> 
    </body> 
</html>

這裏你可以看到一個工作示例：http://jsfiddle.net/dZDUR/

調整右手「結果」窗格中短/比文字高看滾動條出現/消失。

根據CSS Sticky Footer how-to，您可以在main div中插入普通'列'佈局。

來源

2011-09-16 07:59:25

我試過這個，但即使我的身體有幾行說一兩行，我仍然得到滾動條。任何幫助避免滾動條 – Rajesh

你最好問一個新的問題。鏈接回這個，還包括你的代碼的例子，以及你看到哪個瀏覽器的滾動條。 –

設置DIV HIGHT各自通過jQuery

回答

相關問題