위치 : Firefox의 절대 값

왼쪽에 텍스트가있는 간단한 2 열 페이지와 오른쪽에있는 다양한 로고와 것들을 조합하려고합니다. 오른쪽 열의 맨 아래에 몇 개의 텍스트를 배치해야합니다. 간단한 position: absolute; width: 250px; bottom: 0;은 내가 필요한 모든 것처럼 보였다.위치 : Firefox의 절대 값

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body{ 
    margin: 0px; 
    background-color: #eee; 
}#content{ 
    background: white; 
    width: 900px; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif; 
}#text{ 
    padding-left: 8px; 
    padding-right: 8px; 
}.left{ 
    width: 634px; 
    border-right: 2px solid black; 
}.right{ 
    width: 250px; 
    text-align: center; 
    position: relative; 
}.bottom{ 
    position: absolute; 
    width: 250px; 
    bottom: 0; 
} 
</style> 
</head> 
<body> 
    <center> 
     <div id="content"> 
      <div id="body"> 
       <table border=0> 
        <tr valign="top"> 
         <td id="text" class="left"> 
          Some text 
         </td><td class="right"> 
          <center class="bottom"> 
           Bottom 
          </center> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </center> 
</body> 
</html>

매우 솔루션은 파이어 폭스를 제외한 모든 브라우저에서 작동 : 여기에 또한 here를 호스팅 내가 해낸 코드입니다. 파이어 폭스는 요소를 거의 position:fixed으로 처리하여 요소의 맨 아래가 아닌 화면 맨 아래에 잠급니다 (일반적으로 화면 맨 아래에 있음). 나는이 문제를 겪고있는 다른 누군가를 찾을 수없는 것처럼 보입니다. 이것은 제가 잘못하고있는 것을 의미합니다. 나는 이것을 몇 시간 동안 망쳤지만 그 결과는 변함이 없다. 어떤 도움이라도 대단히 감사 할 것입니다.

출처

2012-08-13 Dan Hlavenka

위치 지정에 두 개의 div을 사용하십시오. 이

처럼 live demo

코드는 필요 이상 당신이 더 어렵게 만들고있다

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body{ 
    margin: 0px; 
    background-color: #eee; 
}#content{ 
    background: white; 
    width: 900px; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif; 
}#text{ 
    padding-left: 8px; 
    padding-right: 8px; 
}.left{ 
    width: 634px; 
    border-right: 2px solid black; 
}.right{ 
    width: 250px; 
    text-align: center; 
    height:150px; 
    background:red; 
    position: relative; 
}.bottom{ 
    position: absolute; 
    width: 250px; 
    bottom: 0; 
    background:green; 
} 
</style> 
</head> 
<body> 
    <center> 
     <div id="content"> 
      <div id="body"> 
       <table border=0> 
        <tr valign="top"> 
         <td id="text" class="left"> 
          Some text 
         </td><td> 
<div class="right"> 
         <center class="bottom"> 
           Bottom 
          </center> 
         </div> 
         </td> 
        </tr> 
       </table> 
      </div> 
     </div> 
    </center> 
</body> 
</html>

출처

2012-08-13 06:23:55

당신이 한 것은'# right'과'.bottom' 고정 높이를주는 것입니다.'# right'는'.left'와 같은 높이가되어야합니다. –

입니다. 이 답변은 귀하의 설명에 기반을 두지 만, 귀하를 위해 효과가 있어야한다고 생각합니다. 또한 픽셀을 사용하는 것을 믿지 않기 때문에 내부 용 백분율을 기반으로이 작업을 수행 할 것입니다. 모바일 장치를 다루는 것이 저를 멀리 옮겼습니다.

body { 
margin: 0 auto; 
background-color: #eee; 
} 
#content { 
background: white; 
width: 900px; 
text-align: left; 
font-family: Arial, Helvetica, sans-serif; 
} 
#left{ 
width: 72%; 
border-right: 2px solid black; 
overflow: hidden; 
} 
#right{ 
width: 25%; 
text-align: center; 
float: right; 
overflow: hidden; 
} 
#bottom{ 
float: right; 
width: 25%; 
}

당신은 스타일 시트 파일로 그 위의 코드를 넣어 호출하는 대신 바로 웹 페이지에 코드를 삽입해야하지만, 그건 그냥 의미입니다 : 여기 간다. 이 스타일 시트의 HTML 코드는 다음과 같습니다.

<html> 
    <head> 
    ... (do whatever you need to here, including the stylesheet call) 
    </head> 
    <body> 
     <div id="content"> 
      <div id="left"> 
      ...(place your stuff that goes on the left here) 
      </div> 
      <div id="right"> 
      ...(place your stuff that goes on the right here) 
      </div> 
      <div id="bottom"> 
      ...(place your stuff that goes on the bottom right here) 
      </div> 
     </div> 
    </body> 
</html>

기본 레이아웃을 제공해야합니다. 이제 왼쪽 div가 오른쪽 div와 같은 높이가 아닌 경우 두 섹션 사이에 만드는 세로선이 완전히 아래로 내려 가지 않음을 기억하십시오. 이것이 어떻게 작동하는지 알려주고, 내가 당신을 더 도울 수있는 것을 보게 될 것입니다.

** 나중에 참조 할 수 있도록 스타일을 지정하기 위해 테이블을 사용하지 않는 경향이 있습니다. 웹 페이지가 상당히 복잡 해지면 처리하기가 어려워집니다. Divs 및 기타 요소는 훨씬 더 잘 작동하는 경향이 있습니다.

출처

2012-08-13 06:32:41 th3n3wguy

실제 사이트에서 외부 스타일 시트를 사용합니다.이 파일을 여기에 결합하여 단일 파일로 표시했습니다. 또한, 저를 믿으십시오, 나는 테이블의 공포에 관하여 모두를 있있다. 이전 버전의 IE에서'float' 요소를 올바르게 표시하는 데 어려움을 겪고 있었으므로이 페이지를 테이블로 사용했습니다. 내가 테이블을 사용하지 않고 코드를 작성해 보도록하겠습니다. 아마도 운이 좋을 것입니다. 나는 테이블없이이 페이지를하고 싶다. –

당신의 코드를 사용하면,'float : right'의 모든 것은'# left'의 하단 가장자리에서 오른쪽 가장자리를 갖습니다. '# left' 전에 HTML을'# right '로 옮기면 그 부분은 작동하지만'# bottom'은 여전히'#content'의 맨 아래에 걸려 있습니다. –

정확하게 이해한다면 - 파이어 폭스는 사양과 거의 비슷합니다. 그것에 대한 자세한 내용을 볼 수 있습니다 here

"왜"(다른 사람들은 어떻게 대답 했습니까?) 질문에 대답하십시오. 내 이해에 따라 사양은 페이지 스크롤에서 위치를 계산 (다시)하지 않습니다. 그것은 구현에 많이 의존하는 IMO입니다. 절대 위치에 배치 된 요소에 상대적으로 위치하는 부모가 존재하지 않으면 표시 가능한 뷰포트/창과 관련하여 배치됩니다. 따라서 Firebug를 열면 방화 광 창 상단에서 요소가 bottom:0 인 것을 알 수 있습니다. 값을 스크롤하면 다시 계산되지 않는 것 같습니다.

윈도우와 관련해 위치 지정을 시작할 때 재미있는 일이 생기고 그 영향을 알아야합니다. (아마도 그 중 하나를 발견했을 것입니다 :) @Rohit과 같은 상위 div로 감싸는 것이 좋습니다. @thenewguy 언급

출처

2012-08-13 06:40:17 PhD

위치 : Firefox의 절대 값

답변

관련 문제