상대 위치 컨테이너의 절대 위치 지정된 바닥 글

Question

이 질문의 버전은 여러 번 묻습니다. 지난 4 시간 동안 거의 모든 사람을 읽었던 것 같아요.

아무 것도 여기에 대한 답변을 보지 못했습니다.

내가 겪고있는 문제는 다음과 같습니다. 매우 유용한 반면 매우 제한적인 템플릿을 템플릿에 사용할 수 있습니다. 그러나 나는 css로 놀 수있다. 이제 바닥 글 바로 아래에 필요한 헤더 근처에서 사용되는 몇 가지 항목이 있습니다.

필자는 상대적으로 배치 된 작업을 수행하는 래퍼를 가지고 있으며 바닥 글 아래에 필요한 항목이 포함 된 절대 위치를 지정했습니다.

.referencepositionwrapper { 
    position: relative; 
} 
.absolutepositioncontainer { 
    position: absolute; 
    bottom: -144px; 
} 

하지만 항목이 저하되는 경우에만 높이가 약 136 픽셀이다 :

이것은 극단적으로 잘 작동한다.

여기에 문지름이 있습니다. 꼬리말 아래로 이동해야하는 콘텐츠는 동적입니다. 때로는 136px, 때로는 36px입니다. 때로는 300px의 키도 있습니다.

현재 절대 위치 지정 항목은 래퍼와 컨테이너의 하단을 참조하므로 컨테이너 높이가 변경되면 상황이 불안정 해집니다.

래퍼 하단과 컨테이너 상단을 사용하여 두 요소 사이에 큰 데드 스페이스가 없도록하는 방법이 있습니까?

정말 고마워요, 어떤 도움을 주시면 감사하겠습니다.

---

요청 된 콘텍스트.

bottom:-144px; 

는 상대적인 바닥하고 확인하다 절대

의 바닥 푸터 사이 144px 거리를 작성 I 절대 클래스 준 예에서

키가 136px에 불과합니다. 두 요소 사이에 적당한 크기의 공간이 있습니다 (약 8px). 그러나 절대 값은 다른 페이지에서 높이가 다릅니다.

그래서 바닥 글에 더 많은 데이터가 포함되어 있으면 절대 300px의 높이를 만들 정도로 충분하다고 말하면 156px의 겹침이 있습니다. 데이터가 적 으면 절대 크기가 36px가 될 정도로만 말하면 108px의 "데드 스페이스"가 있습니다.

내가 거리를 정의하는 방법을 찾으려면, 상대의 바닥 절대의 상단 사이에, 36 x 36 픽셀을 말한다.

그런 식으로 절대 데이터에 얼마나 많은 여분의 데이터가 있는지 관계없이 상대와 절대 사이에는 36px 밖에 없습니다.

의견을 보내 주셔서 감사합니다. 희망이 도움이됩니다. 다른 정보가 필요한 경우 알려주십시오.

Answer 1

이 시도 :

.referencepositionwrapper { 
    position: relative; 
} 

.absolutepositioncontainer { 
    position: absolute; 
    top: 100%; 
    margin-top: 36px; /* or your custom distance between the two */ 
}