해상도 호환 - HTML

Question

화면 해상도를 변경할 때 메뉴가 엉망이되는 내 탐색 메뉴에이 문제가 있습니다. 이것은 내 코드 jsfiddle : http://jsfiddle.net/qh5u47t2/입니다. 도움말 크게 감사하겠습니다. 감사.

<div id="topMenuDiv" style="background-color: gray; height: 20%; width:99%; margin: 0 0 -2px 0; position: absolute; top: 0px; border: 1px solid red;"> 
    <div class="navigation" style="height:100%; width:100%;"> 
     <ul class="menu"> 

이

내 메뉴의 기본 HTML 코드이며, CSS는 : 나는 다시 크기 조정하여 JSfiddle을 시도했습니다

.navigation { 
    float: right; 
    margin: 0 auto; 
} 

ul.menu { 
    margin: 0 0 0 0; 
    padding: 0; 
    position: absolute; 
    top: 65%; 
    left: 20%; 
    list-style: none; 
} 

Answer 1

, 그것은 당신의 코드에 반응하지 않는 것을 나에게 보인다 최상위 창 (가시 영역)에 '공간'이 충분하지 않은 경우 콘텐츠를 리플 로우하여 전체를 표시하지 않는 방식입니다. 부트 스트랩 그리드 시스템은 다양한 화면 해상도를 즉시 처리하는 것을 포함하여 작업 완료에 도움이됩니다. 제 경험상 학습 가치가 있습니다. 몇 가지 링크는 시작하려면 : http://getbootstrap.com/css/#grid 당신은 여기에 몇 가지 템플릿을 볼 수 있습니다 (그리드 시스템) :`배우 미디어 queries` 아니면 그냥 프레임 워크를 사용, http://getbootstrap.com/getting-started/#examples

그것이