设置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

回答

相关问题