고정 된 요소가 크기 조정시 특정 높이를 넘지 않도록 방지

페이지의 아래쪽과 오른쪽에 몇 개의 아이콘이 있습니다. 창 크기를 조정할 때 아이콘이 사라 지길 원합니다. 그렇지 않으면 위의 내용과 충돌합니다. min-width를 사용하여 왼쪽에서 오른쪽으로 크기를 조정할 때 문제를 해결할 수 있었지만 min-height를 사용하여 솔루션을 찾지 못하는 것 같습니다.고정 된 요소가 크기 조정시 특정 높이를 넘지 않도록 방지

JQuery와 CSS 모두 환영합니다. 아이콘에는 클래스 (.icon)가 지정되고 섹션 (#footer) 내에 중첩됩니다. 여기 있습니다.

CSS

#footer .icons{ 
position: fixed; 
bottom:10px; 
left:0; 
width:98%; 
min-width:1350px;

}

.icons{ 
display:inline-block; 
text-align:right; 
    z-index:-9999; 
float:right; 
right:10px; 
padding:2px; 
bottom:10px;

} 사전에

감사합니다!

출처

2014-07-21 krubkiewicz

창 크기에 따라 요소를 표시하거나 숨기려면 미디어 쿼리를 확인해야합니다. Mozilla 문서는 다음과 같습니다. [@media] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) – Niflhel

미디어 쿼리 사용을 고려 했습니까? [MDN의 미디어 쿼리] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) –

완벽하게 작동합니다. – krubkiewicz

약간의 JQuery를 사용하려는 경우 매우 간단합니다.

.unfixed_icons { 
    position: relative 
    top: [whatever you want] 
    left: [whatever you want] 
}

위와 동일한 html을 유지하면 어떤 종류의 클래스에도 unfixed_icons을 추가하지 마십시오.

if $(document).height() > $(window).height() 
    $('.icons').addClass 'unfixed_icons' 
else 
    $('.icons').removeClass 'unfixed_icons'

죄송합니다. coffeescript로 작성되었지만 이해 하시리라 생각합니다. 첫 번째 라인이 가장 중요합니다. 문서가 윈도우의 뷰포트만큼 큰지 확인합니다. 그럴 경우 아이콘을 상대적으로 배치하여 사라지게합니다. 그렇지 않으면 아이콘이 고정됩니다.

이 사람이 페이지를 다시로드 할 때마다 벌금 작동하지만, 당신이 그것을 재설정 할 경우 누군가가 창문도이 같은해야합니다 크기를 조정하면 다음 position_function이 JQuery와 동일 할 경우

(window).resize -> 
    clearTimeout(resizeTimer) 
    resizeTimer = setTimeout(position_function, 100)

을/coffeescript 위. 본질적으로 페이지를 다시로드 할 때 1 초 동안 바닥 글을 다시 확인하여 올바르게 배치되었는지 확인합니다.

행운을 빈다.

출처

2014-07-22 00:56:17 Kites

고정 된 요소가 크기 조정시 특정 높이를 넘지 않도록 방지

답변

관련 문제