서문 : 회사 프로젝트는 팝업 프레임을 수직 센터에 사용해야합니다. 인터넷의 비슷한 수직 센터링 팝업 레이어는 비슷합니다. 프로젝트는 jQuery를 기반으로하기 때문에 $ (Window) .Height ()-Layer.height ())/2 +$ (Document) .scrolltop ()를 사용하여 수직 변위를 얻습니다. 문제없이 모든 종류의 브라우저를 테스트했습니다. 배경 직원이 가치를 프로젝트로 옮긴 후 문제가있었습니다. 페이지가 한 화면을 초과하면 Chrome 및 FF에서 팝업 박스는 현재 화면의 수직 중앙에있는 것이 아니라 전체 웹 페이지를 중심으로 중앙에 있습니다.
모든 당사자의 정보를 검토 한 후 모든 결론은 다음을 나타냅니다.
1. 창 높이, $ (창) .height ()
2. 문서 높이, $ (Document) .Height ()
3. 롤업의 높이, $ (창) .scrolltop ()
이유를 찾으십시오 . 그런 다음 백엔드 직원의 페이지에는 DocType가 없다는 것을 알았습니다. 따라서 Chrome에서 $ (Window) .Height () = $ (Document) .Height (), $ (Document) .Height ()는 웹 페이지의 실제 콘텐츠 높이가 한 화면으로 가득 차 있지 않으면 전체 창의 값이 변경 될 때 값이 변경되고 감소 할 때 값이 변경 될 때)를 의미합니다. 페이지가 한 화면을 초과하면 전체 웹 페이지 컨텐츠의 실제 높이로 표현됩니다. 이에 대한 반대는 없으며 Doctype를 설정할 것인지의 여부에 영향을 미치지 않습니다. 그러나 : $ (Window) .Height ()는 웹 페이지 내용의 실제 높이가 전체 화면을 초과하는지 여부에 관계없이 전체 창의 높이와 같습니다 (창이 확대되고 감소 될 때 값이 변경됨). DocType가 설정되지 않은 경우 $ (Window) .height () = $ (Document) .height (). 즉, 콘텐츠가 하나의 화면을 초과 할 때 $ (창). height ()는 웹 페이지의 실제 높이이며, 이는 창 높이와 같다고 말하는 것이 아닙니다.
해결책:
s 창의 높이를 얻으려면 DocType에 따라 해당 변경 만 할 수 있습니다. DocType가 설정되지 않은 경우 다음 처리가 수행됩니다.
if ($ (document) .height ()> = $ (창) .height ()) {_windowHeight = document.body.clientHeight; } else {// alert ($ (창) .height ()); _windowHeight = $ (Document) .Height (); };DocType가 Transitional.dtd로 설정되면 WindowHeight = $ (Window) .Height ()
DocType가 $ (Window)의 값에 대한 영향에 대한 위의 간단한 논의는 내가 공유하는 모든 콘텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.