절대 모드에서 div를 배치하기 위해 높이를 얻습니다.

StackOverflow https://stackoverflow.com/questions/940428

문제

내 마지막 질문이 즉시 답변되었으므로 ..내 머리카락을 모두 앗아가는 새 포스팅을 올리기로 결정했어요, XD

이게 문제 야..

절대 위치 div가 있는 디자인이 있습니다.투명한 png와 간단한 앵커가 있는...그냥 이렇습니다.

<div class="buyfloat">
      <img src="img/buy.png" />
</div>

그래서..절대 위치에 위치한 이 div.buyfloat가 필요합니다...움직이지 않고..점프도 없고 페이딩도 없고..페이지 맨 아래부터 200px 정도가 필요해요...왜냐면 바닥글 상단에만 필요하거든요..페이지 높이가 증가하거나 감소함에 따라 ..상위 선택기를 사용할 수 없습니다.

잘.."바닥을 사용하십시오!" 당신은 말할 수 있습니다 ..네 선생님 노력했어요..하지만 어떤 이유에서인지..하단 선택기는 전체 내용 대신 창 높이(표시 부분)를 사용합니다.그리고..페이지를 아래로 스크롤하면..이미지는 페이지 중앙에 있습니다.

.buyfloat{
    width:333px;
    height:135px;
    position:absolute;
    left:10px;
    bottom:200px; /**   not working         **/
    margin:5px auto 0 auto;
    z-index:99;
}

CSS에서 바로 신체 높이를 알려주는 자바스크립트(언젠가 본 것 같아요)를 찾고 있어요.하지만 좀 더 쉽고 다른 해결책이 있다면..난 다 들었어!

미리 감사드립니다.

도움이 되었습니까?

해결책

"위치 : 절대"는 실제로 "정적"이외의 위치 값을 갖는 요소의 첫 번째 조상과 관련이 있음을 명심하십시오 (포인트 4 참조 http://www.w3.org/tr/css2/visudet.html#containing-block-details). 따라서이 상황이있을 수 있으며 "하단"은 HTML/본체가 아닌 다른 요소에서 측정됩니다.

다른 팁

우선, CSS에서 JS가 작동하는 유일한 방법은 IE 전용 "표현식"을 이용하는 것입니다. 두 번째로 이를 위해서는 사용자에게 JS도 켜져 있어야 합니다.

pos:abs는 일반 레이아웃에서 요소를 제거하고 가장 가까운 절대 또는 상대 상위 요소를 기준으로 배치합니다.엄격하거나 과도기적인 xhtml을 사용하는 경우 본문도 상대적으로 만들면 하단이 절대적으로 작동합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
        body {height: 9000px;position:relative;}
        #a {position:absolute; bottom:0px;}
        </style>
    </head>
    <body>
    <div id="a">bottomDweller</div>
    </body>
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top