문제

창 크기를 조정하고 수직 스크롤 바가 나타날 때, 하단으로 스크롤하면 하단이 분해됩니다. 나는 이유를 이해하지 못하지만 페이지가 100% 높이를 사용하는 방식과 관련이 있다고 생각합니다. 모든 도움이 감사하겠습니다!

페이지는 다음과 같습니다. zxsdesign.com/main1.html

스크린 샷이 있습니다

zxsdesign.com/bug1.png http://zxsdesign.com/bug1.png

도움이 되었습니까?

해결책

CSS를 사용하는 것은 혼합 된 것입니다 height 속성 및 절대 포지셔닝. AJM은 사용에 대해 이야기했습니다 min-height - 이상적으로는 대신 사용해야합니다. height 당신이 일을 100% 높게 만들 때.

다른 문제에. 요소를 절대적으로 배치하면 더 이상 페이지 구조의 일부가 아닙니다. 대신, 그들은 별도의 평면에 살고 있으므로 페이지 차원에 영향을 미치지 않습니다. 당신의 <div id="flashcontent"> 창 경계를 지나서 영향을 미치지 않습니다 <body>국경.

사용하지 않으면이 문제를 해결할 수 있습니다 position: absolute. 할 필요가 없습니다. 대신, 당신은 위치 할 수 있습니다 #flashcontent 정상적으로 요소를 제거하고 제거하십시오 #bg 완전히 요소 - 그냥주십시오 #flashcontent 대신 배경. 그런 다음 사용하십시오 margin: 0 auto; 그리고 padding-top: 179px; 올바른 장소에 배치합니다.

다른 팁

불행히도 높이 : 100%; 다르게 구현됩니다 ... 브라우저가 사용할 때 원하는 것을 수행하는지 확신 할 수 없습니다.

Clear : Left; 또는 명확 : 둘 다; 당신의 스타일로.

100% 높이는 한 화면 높이입니다. 위로 스크롤하면 높이의 100%를 덮습니다. 블록을 규모로 만들거나 최소한 화면 중앙으로 이동하십시오. 상단 및 하단 패딩을 자동으로 설정하여이를 수행 할 수 있습니다.

또한 헤드 태그가 제대로 닫히지 않았습니다. 확인하다 이것

귀하의 페이지는 전적으로 모든 요소에 100% 높이를 사용하는 것을 기반으로합니다. 사용자의 브라우저 뷰포트가 충분히 크면 괜찮습니다. 그러나 그들이 브라우저를 크기를 조정한다면 작은 충분히, 당신의 페이지는 더 작은 높이의 100%가 될 것이며 물건은 바닥에서 떨어질 것입니다.

컨테이너 요소 중 하나에서 최소 보상을 설정하십시오. 브라우저 창이 그 높이 아래로 떨어지면 사물이 크기 조정을 중단해야합니다. 또는 컨테이너 품목 중 하나에 플래시 조각을 포함 할 수있을 정도로 큰 오래된 높이를 설정하고 다른 사람들이 그로부터 상속받을 수 있습니다.

그리고 IE6은 Min-Height (FF2+, IE7, Safari All Do)를 지원하지 않으므로 해킹해야합니다. 그렇게 좋아요.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top