CSS 에뮬레이션 위치 : 끈적

내 문서 구조 : 끈적 끈적한 (I 작동시킬 수, 또는 정말 많은 문서에서 찾을 수 있음) #controlBox에을 :CSS 에뮬레이션 위치 : 끈적

<div id="section"> 
     <div class="subSection"> 
     <h2></h2> 
     </div> 
     <div class="subSection"> 
      <div></div> 
     </div> 
     <div id="controlBox"> 
      <h2></h2> 
      <form></form> 
     </div> 
</div>

나는 전설 위치를 에뮬레이션 할 필요가있다. JS 또는 CSS로이 작업을 수행하는 방법은 무엇입니까?

출처

2013-07-03 Josh Dredge

그래서 어떻게 생겼을까요? 귀하의 질문에 모순이 있습니다. – zeroflagL

모순은 무엇입니까? 다시 말하자면 - section div에서 "position : fixed"(예 : 페이지 스크롤)와 동일한 동작을하는 상자 (#controlBox)가 있어야하지만 두 하위 섹션 아래에 위치해야합니다 –

'position : 고정 '은 페이지와 함께 스크롤하지 않음을 의미합니다. 스크롤 할 때 화면 위치에 그대로 있습니다. – zeroflagL

순수 CSS 솔루션에 대해 잘 모르겠지만 jQuery가이 문제를 해결할 수 있습니다.

의사 코드 :

// this returns the value of the browser's window's height in pixels 
$height = $(window).height(); 

// this is considering that both subsections are next to each other (they take up 80% of the height) 
$subsectionHeight = $height * 0.8;

를 또는, 하위 서로의 상단에있는 경우, 그들은 80을 차지 :

// Calculate height of screen 
// Choose what percentage of that both subSections take up 
// Remaining percentage is the height of the controlBox

은 그래서 jQuery를이 같이 조금 보일 수 있습니다 합계의 높이의 비율 :

$subsectionHeight = $height * 0.4; 

// controlBox takes up 20% of height of window 
$controlboxHeight = $height * 0.2; 

// then you can assign the heights to each element 
$('.subSection').css("height", "$subsectionHeight"); 
$('#controlBox').css("height", "$controlboxHeight");

나는 순수 CSS를 선호하지만 jQuery는 grea라는 것을 알고 있습니다. 때때로 사용하십시오.

jQuery를 모르거나 jQuery를 이해하는 데 어려움이있는 경우 Codecademy's jQuery course에 가입하는 것이 좋습니다.

출처

2013-07-03 12:16:03 taevanbat

그리고 controlBox가 항상 창의 아래쪽에 있도록하려면 margin-bottom의 값을 0으로 설정하십시오. position : fixed를 가진 요소가 DOM 흐름에서 꺼내 져서 어디에 있는지 알 수 없으므로 그 밖의 모든 것이 있습니다. 겹치는 문제를 해결하기 위해 jQuery를 사용하고 숫자를 계산해야한다고 생각합니다. 나는 모든 것을 다 망 쳤니? – taevanbat

jQuery는 많은 공간을 차지하기 때문에 가볍습니다. 특히이 사이트가 필요합니다. 솔루션을 일반 JS로 쉽게 변환 할 수 있지만 다른 누군가가 더 나은 것을 제공하지 않는 한, 일을 처리하는 방법처럼 보입니다. –

CSS 에뮬레이션 위치 : 끈적

답변

관련 문제