절대 위치 100 % 높이 스크롤 오버 플로우 문제

Question

웹 사이트 ... http://dev.rapweb.co.uk/londonplace/research.htm

문제는 ... 아래로 스크롤 단지 공백 및 텍스트의 아래 부분을 보여줍니다 빨간색 패널에 표시되지 않습니다.

해결 방법 ... 빨간색 패널에서 오버 플로우 자동으로 페이지 스크롤 막대가 발생합니다. 절대 위치로 인한 것 같아요.

기타 아이디어 ... 배경을 덮고 아래쪽으로 정렬되어 있기 때문에 원래 계획했던 것을 달성 할 수 없을 수도 있으므로 머리글 뒤에 텍스트 스크롤이있는 것을 살펴 보았습니다. 가로 스크롤 막대가 발생할 정도로 브라우저 너비가 충분히 낮 으면 문제가 발생합니다. 텍스트가 더 이상 포함되지 않아 빨간색 패널과 회색 영역 바깥으로 스크롤 될 수 있기 때문입니다.

도움을 주시면 감사하겠습니다.

Answer 1

이렇게하면 스트립이 계속 내려 가고 이미지가 아래로 확장됩니다.

이 추가 :

/* These 2 made the red strip not behave funny with <p> margins */ 

#redStripContent p:first-child { 
    margin-top: 0; 
    padding-top: 1em; 
} 

#redStripContent p:last-child { 
    margin-bottom: 0; 
    padding-bottom: 1em; 
} 

/* This extends the size of red strip */ 

#redStrip { 
    position: relative; /* was absolute */ 
} 

을이 제거

당신이 코멘트에 언급 된 다른 페이지 문제에 관해서는

/* This removes the fixed bottom on main image area */ 

#mainImageArea { 
    bottom: 0px; 
} 

, 당신이 분 높이의 조합으로 놀러 제안 : 100 % 음수 여백. 예를 들면 다음과 같습니다.

#mainImageArea { 
    min-height: 100%; 
    margin-top: -110px; 
    z-index: -1; 
}