让一个div有最高的位置？

我不太清楚如何提出这个问题。我想要做的是在页面底部有一个元素，它始终贴在底部，但是如果页面太短，它将被页面上的其他元素推下。让一个div有最高的位置？

实施例：

左侧中间图形和右标题都包含内#mainBodyContent。如果浏览器窗口足够小，这个div会进入“Latest in Geek”flash中，我希望flash box被压下。但是，如果#mainBodyContent没有运行到闪存盒中，我希望闪存盒能够粘贴到当前位置的底部。我很困惑，因为它如何取消。

任何建议/帮助吗？我有道理吗？

来源

2011-02-01 Ghost9

您可以使用绝对定位与填充相结合。例如可以在这里看到：

Static Footer Example

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

    /* layout */ 
    #container { 
     width:800px; margin: 0px auto; 
     position: relative; min-height: 100%; 
    } 
    #top { height: 12px; } /* margin on header breaks liquid layout */ 
    #header { position: relative; } 
    #content { padding-bottom: 72px; } /* 60px footer height plus 12px padding */ 
    #footer { 
     clear: both; 
     position:absolute; 
     bottom: 0px; 
     width:100%; 
     height:60px; 
     text-transform: uppercase; 
     background-color: red; 
    } 
    .section { 
     margin-top: 12px; 
     padding-top: 12px; 
     border-top: 1px solid black; 
     border-bottom: 1px solid black; 
    } 

</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="top"></div>  
     <div id="header"> 
      <h1>Title</h1> 
     </div><!-- end header div --> 

     <div id="content"> 

      <div class="section"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 

     </div><!-- end content div --> 

     <div id="footer">Footer content here</div> 

    </div><!-- end container div --> 
</body>

来源

2011-02-01 22:39:10 Jason

你的榜样肯定就是我要找的是，但我似乎无法得到它在我自己的自定义的方式工作。使用z-index会打破它吗？ – Ghost9 2011-02-02 03:37:20

尝试使用CSS选择器position:fixed

来源

2011-02-01 22:31:02 CamelBlues

快速刺给你最的你在找什么。关注点（对我而言）是，当页脚位于页面底部时，上面的元素将在其下面运行。某些脚本可能会改变这种情况（并且很可能如何在您的示例中完成），但这是一个开始。

<html> 
    <head> 
     <style> 
     #footer { 
      position: fixed; 
      bottom: 0px; 
      background-color: Red; 
      height: 200px; 
     } 

     *html #footer { 
      position: absolute; 
      bottom: 0px; 
      background-color: Red; 
      height: 200px; 
     } 
     </style> 
    </head> 
    <body> 
     <div>A test</div> 
     <div id="footer">Here's my footer</div> 
    </body> 
</html>

来源

2011-02-01 22:33:43 nkirkes

比较您的内容与窗口的高度的高度。如果窗口大于内容的高度，则将页脚设置为position: fixed; bottom: 0;。

CSS：

#footer 
{ 
    bottom: 0; /* this line does nothing until you set position: fixed; */ 
}

的javascript：

function setFooterPosition() 
{ 
    var foot = document.getElementById("footer"); 
    var docEl = document.documentElement; 
    foot.style.position = docEl.clientHeight < docEl.scrollHeight ? "" : "fixed"; 
} 
window.onload = setFooterPosition; 
window.onresize = setFooterPosition;

来源

2011-02-01 23:08:23 gilly3

让一个div有最高的位置？

回答

相关问题