요소를 스크롤 막대를 트리거하지 않게 만드는 방법은 무엇입니까?

가로 세로 모드에서 iPad의 사파리 높이를 고정 높이 (661px)로 설정 한 페이지가 있습니다. iPad에서는 스크롤하는 것을 원치 않습니다. 내용은 정확하게 적합해야한다.요소를 스크롤 막대를 트리거하지 않게 만드는 방법은 무엇입니까?

그러나 키가 큰 브라우저 창에서는 661px 폴드 아래에 몇 가지 추가 콘텐츠 (저작권 라인)를 표시하고 싶습니다. 그러나 스크롤바는 윈도우 크기가 661px보다 작아 질 때까지 표시되지 않습니다. 즉, 스크롤바가 나타나기 전에 바닥 글이 잘립니다. 661px보다 키

+--------+ +--------+ +--------+^
|  | |  | |  | # 
|  | |  | |  | v 
+--------+ +--------+ 
    Footer 

    (1)   (2)   (3)

창; 스크롤 바 없음
창 정확히 661px; 바닥 글이 잘리지 만 여전히 스크롤바가 없습니다.

창 크기가 661px보다 작습니다.

<body> 
    <div class="all"> 
    ... main content ... 
    <div class="footer">Copyright!</div> 
    </div> 
</body>

그리고 해당 CSS :

.all { 
    height: 661px; 
    overflow: visible; 
} 

.footer { 
    position: absolute; 
    left: 0px; 
    top: 661px; 
}

이 바로 이곳에있는 모든 요소를두고 있지만, 어떻게 든 바닥 글이 아직도 기여 스크롤은 다음과

내 간단한 마크 업이 나타납니다 를 페이지 높이에 적용하여 높이가 작은 요소 내부에 앉아 있더라도 스크롤 막대를 트리거합니다. overflow과 height의 조합이 html, body 및 .all 인 경우 크롬이나 파이어 폭스에서는 문제가 해결되지 않은 것으로 보입니다.

어떻게해야할까요?

더 일반적인 질문 : 창에서 스크롤 막대가 어떻게 트리거되는 지 묻고 싶습니다. Chrome 인스펙터가 html 및 body의 예상 높이가 661px 인 것으로 표시된 것처럼 단순히 body의 높이가 창보다 큰 것은 아닙니다.

출처

2012-12-09 Thomas

왜 조건부 스타일 시트를 사용하지 않습니까? 스타일 시트에 다음 태그

media="screen AND (max-height:661px)"

나는 이것을 테스트 할 수 없으므로 어떻게 작동하는지 (또는하지 않는지) 말해 주시면 감사하겠습니다.

출처

2012-12-09 15:53:30

Perfect! 안전한면을 잘못 설명하기 위해'max-height : 700px'를 설정했습니다. 이것은 모든 것이 맞는 경우에만 바닥 글을 나타냅니다. 미디어 쿼리와 관련없는 대안 답변을 아직 열어 보았지만 실제로는 꽤 우아합니다. – Thomas

며칠 전이 사실을 알게되었습니다. D. 그래서 내가 도울 수있어서 기뻐! –

@ 토마스 : 이것은 미디어 쿼리가 적절한 해결책 인 반응 형 디자인의 한 예입니다. 다른 해결책은 훨씬 덜 우아 할 것입니다. –

요소를 스크롤 막대를 트리거하지 않게 만드는 방법은 무엇입니까?

답변

관련 문제