CSS粘滯頁腳與左/右側不同背景色

我有以下的HTML（也在http://jsfiddle.net/pHXSJ/）。在IE和Firefox中，它按預期工作。但是，Chrome和Safari無法正確定位視窗底部的頁腳。我已經嘗試過很多建議，包括從cssstickyfooter.net執行。雖然這些技術有效，但一旦我嘗試提供（在此示例中）綠色側欄顏色，它們就開始失敗。請注意，這些側邊欄沒有內容。CSS粘滯頁腳與左/右側不同背景色

<!DOCTYPE html> 
<html> 
    <head> 
     <title>2012 test</title> 
     <style> 
      html,body,form {height: 100%;} 
      body,p{margin:0} 
      div#wrapper {height:100%;background-color: transparent;} 
      div#contentwrap {width:100%; position:relative; height:100%; top:0; padding-bottom: -4em;} 
      div#content {top:0;position:relative;width:20em;min-height:100%;margin-left:auto;margin-right:auto;background-color:white; border-left: 2px yellow solid;border-right:2px yellow solid;} 

      div#header {min-width:20em; width:100%; position:absolute; top: 0; height: 2em; background-color: silver;} 
      div#header2 {min-width:20em; width:100%; position:absolute; top:2em; height: 1em; background-color: aqua;} 
      div#footer {min-width: 20em; position: relative; clear: both; margin-top:-4em; height: 4em; background-color: red;} 
     </style> 
    </head> 
    <body style="background-color:green;"> 
     <form> 
      <div id="wrapper"> 
       <div id="contentwrap"> 
        <div id="content"> 
         <div style="padding-top: 3.5em;"> 
          <div id="lcol" style="float:left;position:relative; width:38%"> 
           <p>Left</p> 
          </div> 
          <div id="rcol" style="float:right; position:relative; width:60%;"> 
           <p>Right 1 total of 35</p> 
           <p>Right</p> 
           <p>Right</p> 
           <p>Right</p> 
           <p>Right 5</p> 
           <p>Right</p> 
           <p>Right</p> 
           <p>Right</p> 
           <p>Right</p> 
           <p>Right 10</p> 
          </div> 
          <div style="clear:both;position:relative;"> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div id="header"> 
        <div>Main Header</div> 
       </div> 
       <div id="header2"> 
        <div>Header level 2</div> 
       </div> 
      </div> 
      <div id="footer" style=""> 
       <div>Footer text</div> 
      </div> 
     </form> 
    </body> 
</html>

來源

2012-11-27 SvenAelterman

你可以添加你想要它的樣子嗎？我在Chrome中加載了你的JSFiddle，對我來說看起來很好......儘管對我來說「好」可能不是你想要的。我的一個直接想法是，如果沒有內容存在，你不需要你的'rcol'和'lcol''div';只需將主要內容「div」設置爲特定寬度並將「margin：auto」設置爲居中。 –

如果我看你的CSS這部分丟失：

的div＃包裝{最小高度：100％; padding-bottom：-4em; }

這應該解決您在Chrome中遇到的問題。

來源

2012-11-30 11:30:52 Thijs

CSS粘滯頁腳與左/右側不同背景色

回答

相關問題