왼쪽/오른쪽이 다른 배경색의 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

원하는 사진을 추가 할 수 있습니까? 내가 JSFiddle을 Chrome에로드했는데 나에게 잘 들렸습니다 ... 저에게 "괜찮습니다"라고해도 당신이 찾고있는 것이 아닐 수도 있습니다. 즉각적인 생각은 콘텐츠가 없으면'rcol'과'lcol'' div's가 필요 없다는 것입니다. 메인 콘텐츠'div'를 특정 너비로 설정하고 margin : auto'를 중심으로 설정하십시오. –

난이 부분이 누락 된 당신의 CSS를 보면 :

DIV 번호 래퍼 {분 높이 : 100 %; padding-bottom : -4em; }

이렇게하면 Chrome에서 문제가 해결됩니다.

출처

2012-11-30 11:30:52 Thijs

왼쪽/오른쪽이 다른 배경색의 CSS 고정 바닥 글

답변

관련 문제