CSS/HTML을 사용하여 div 크기를 조정했지만 캐치가 있습니다.

Question

작업중인 페이지의 너비가 div입니다. 높이는 브라우저 창에 따라 크기가 조정되어야합니다. 여기에 내가 지금까지있어 방법 : 페이지 하단에서

#vid_window{ position:absolute; float:left; background-color:#000; width:100%; height:57%; margin-left:auto; margin-right:auto; overflow:hidden; }

위의 DIV에 동영상의 구색을 재생하려면 '메뉴', 비디오입니다 물론,해야합니다 div의 높이로 크기를 조정합니다. div는 클라이언트별로 절대적으로 배치됩니다. 이 #vid_window

을 채울 것입니다 여기에 문제가있어

#vid{width:100%;height:100%:}

: 브라우저의 페이지 크기를 조정하는 경우는 VID 창을 중복 시작 '메뉴'오랜 시간이 걸리지 않는 문제가 아니다 . 백분율을 줄일 수는 있지만 클라이언트마다 일 수 있으며 일 수는 없습니다. 그들은 페이지의 사자의 몫이 영상을 표시 할 수 있기를 원하지만, 물론 메뉴가 창이나 화상과 겹치지 않게하고 싶습니다.

다음은 질문입니다. 브라우저 창에 따라 vid_window 및 vid 크기를 기하 급수적으로 조정할 수있는 방법이 있습니까? 예를 들어, 창을 완전히 확장하면 vid_window는 57 %이지만 반 크기라면 vid_window는 말하자면 30 %입니까?

는 다음 페이지로의 링크, 당신이 원하는 경우 : 당신이 설명한 것과

page

Answer 1

, 당신이 절대적으로 하단에있는 메뉴의 위치를 ​​더 나을 것 같은데, vid_window에 상대적인 위치 지정을 사용합니다. 약간의 JavaScript를 사용하면 올바르게 크기를 조정할 수 있으므로 중복 문제가 해결됩니다. 사용이 허락된다면 jQuery를 사용하여 빠르게 작업 할 수 있습니다.

Answer 2

제임스가 내가 이것을 할 수있는 가장 좋은 방법은 Div vid_window에 클래스를 설정하고 클래스의 높이를 %로 설정하고 디스플레이 창 크기를 확인하여 최적의 설정을 결정하는 것입니다. 또한 페이지가 그 높이보다 낮아지지 않고 Modernizr에서 이전 버전과의 호환성을 고려하여 최소 높이를 설정했을 것입니다. http://www.modernizr.com/

------ 편집 ------

머리글과 바닥 글은 페이지 떨어져 결코 것이다. 당신은 그들이 최소 높이 값은 당신이 생각하는 무엇이든 할 수있다

html,body { height:99%; min-height: 100%; } 
header { height:22%; min-height: 100px; } 
#content { height: 56%; min-height: 200px; } 
footer { height:21%; min-height: 100px; } 

신체의 높이로 확장 할 수 있도록 퍼센트에 머리글과 바닥 글의 높이를 설정하는 것입니다 발생하는 문제를 줄일 수있는 한 가지 방법은 적절하다 당신이 가고 싶어하는 가장 작은 높이. 나머지 부분의 높이 비율은 머리글 꼬리말과 결과적으로 내용을 자동으로 조정해야합니다. 그러나 이것은 특정 지점에서 (모든 최소 너비가 충족되고 브라우저 창이 계속 축소 될 때) 페이지에서 벗어나도록 푸터를 강제합니다. 나는 이것이 바람직하고 고객의 요구를 충족시켜야한다고 생각합니다. 그렇지 않다면 각 브라우저가 패딩 및 높이 계산을 처리하는 방식 때문에 항상 수학을 올바르게 수행하지는 않는 매우 복잡한 javascript로 들어갈 것입니다. 그 위에 자바 스크립트를 사용하지 않으면 작동하지 않을 것입니다.