위치 : 고정 - 콘텐츠가 Zoom - 우수한 라이브러리

http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/ 튜토리얼을 통해 이동하여 고정 톱 바를 만들었습니다 (페이스 북, 트위터, techCrunch 및 다른 인기있는 사이트와 마찬가지로). 그러나 바가 ZOOM에서 실패합니다 .위치 : 고정 - 콘텐츠가 Zoom

다음은 그 의미의 예입니다. - http://rtabl.es/designingforstartups - 링크를 확대하면 오른쪽의 내용이 화면에서 사라지는 것을 볼 수 있습니다. 같은 일이 내게 일어나고, 나는 내용이 줌에 사라 싶지 않다 .. 여기

는 테스트 코드의 자습서를 따라하고 position:fixed과 내용이 float:left로 position:relative이 컨테이너 준 - 궁금을 어디에서 잘못 됐어.

코드 -

 <html> 
    <style type="text/css"> 
    #Contianer{ 
    position: fixed; 
    height: 35px; 
    width: 100%; 
    z-index: 9999; 
    color: white; 
    background-color: #474747; 
    } 
    .x{ 
    float: left; 
    text-align: center; 
    position: relative; 
    line-height: 35px; 
    border:1px solid white; 
    } 
    #a{ 
    width:20%; 
    text-align: left; 
    min-width: 100px; 
    } 
    #b{ 
    width:20%; 
    min-width: 100px; 
    text-align: left; 
    height: 35px; 
    display: table-cell; 
    } 
    #c{ 
    min-width: 200px; 
    width:40%; 
    } 
    #d,#e{ 
    min-width: 50px; 
    width:10%; 
     } 
    body{ 
    border:0; 
    margin: 0; 
    } 

    </style> 
    <body> 
    <div class="Contianer" id="Contianer"> 
    <div id="a" class="x"> 
     foo 
    </div> 
    <div id="b" class="x"> 
     bar 
    </div> 
    <div id="c" class="x"> 
     tom 
    </div> 
    <div id="d" class="x"> 
     jerry 
    </div>   
    <div id="e" class="x">   
     Out 
    </div> 
    </div> 

    </body>

출처

2011-11-05 Vivek Chandra

이 내용에 대해 (컨테이너) UL과 DIV의의 교체 및 선형의 노력, 힘이 작동하는 것 같다. 자습서의 하단 막대는 확대/축소 후에도 잘 유지됩니다. –

확대/축소가 가능할뿐만 아니라 브라우저 창의 크기를 더 작게 조정하면 숨겨집니다. –

예, 주위를 둘러 보거나 잘못된 위치를 알기를 원합니다. –

이 문제에 거주 한 후, 마침내 해결책을 발견 - 여기 .. !! 커뮤니티에 유래 덕분에 링크입니다 (이 힘이 출력을 얻을 QUES 같은 다른 질문을 게시했다)

unable to get the scroll when position:fixed -- elements disappears form the screen

출처

2011-11-06 18:29:40

컨테이너 폭의 100 %이며, 당신의 요소 용기는 20 + 20 + 40 + 10 + 10 = 100 % 걸릴. 확대/축소하면 확대 할 여유 공간이 없기 때문에 이러한 요소의 너비를 지정해야합니다.

편집 : "튜토리얼 콘텐츠가 유지됩니다."본문 요소의 배경 이미지입니다.

출처

2011-11-05 12:49:26 anon12356163

특정 너비로 시도해 보았을 때, 화면에 내용물이 번들 것으로 보입니다. –

문제는 고정 폭 (심지어 min-widths)입니다. 모든 것이 일정 비율 (유연)이거나 최소한의 고정 폭을 고려해야합니다. 그래서 예를 들어, 1 픽셀 경계선을 허용하는 일부 항목의 비율을 축소하고 최소 너비를 제거하면 문제가 발생하지 않습니다 (그러나 작은 화면에서는 수렁을 부딪 힙니다) . 다음은 수정 된 코드입니다 :

#Contianer{ 
position: fixed; 
min-height: 35px; 
width: 100%; 
z-index: 9999; 
color: white; 
background-color: #474747; 
} 
.x{ 
float: left; 
text-align: center; 
position: relative; 
line-height: 35px; 
border:1px solid white; 
} 
#a{ 
width:19%; /*downsized to give room for fixed width borders*/ 
text-align: left; 

} 
#b{ 
width:19%; /*downsized to give room for fixed width borders*/ 

text-align: left; 
height: 35px; 
display: table-cell; 
} 
#c{ 

width:40%; 
} 
#d,#e{ 
min-width: 50px; 
width:10%; 
    } 
body{ 
border:0; 
margin: 0; 
}

출처

2011-11-05 12:57:02 ScottS

문제는 제가 적합하지 않습니다. 화면의 내용 - 이것은 내가 문제를 설명하기위한 요지로 쓴 작은 코드입니다 - 컨테이너의 엔테어 블록은 첫 번째 자습서에서 볼 수있는 것처럼 확대/축소 화면에 머물러 있습니다 (확대 및 축소). 내가 무슨 뜻인지 보려고) .. –

정확히. 꼬리말을 보면 전체 컨테이너가 백분율로 정의되고, 창을 축소하고 확대/축소하면 오른쪽 아래로 튀어 오릅니다. 그리고 충분히 좁 으면 화면에서도 벗어날 수 있습니다. 어떤 고정 된 너비의 항목은 줌이 약간의 확대/축소 배율만큼 고정 폭을 증가시키기 때문에 어떤 시점에서 내용이 화면에서 사라질 것입니다. – ScottS

발판에만 94 % 너비가 지정되고 나머지 앵커에는 발췌문에 16px의 너비가 지정됩니다 (집 50px 및 채팅 126px).어느 시점에서 어떤 고정 점이 화면에 표시되지 않지만 튜토리얼 내용은 그대로 유지된다는 점에 동의합니다 - 즉, 스크롤을 가져 오지만 코드 상단에 스크롤 막대 자체의 내용이 표시되지 않더라도 미리 스크롤되지 않습니다. .. !! .. –

당신은 그것을 해결하기 위해 자바 스크립트를 사용할 수 있으며, 모범 사례에 대한 당신은 절대 위치에 내용을 넣어 용기 내부의 사업부로 컨테이너를 포장 사업부를 사용할 수 있습니다.

자바 스크립트

$(windows).resize(function(){ 
     if ($(window).width() < $('.content').width()){ 
      $('.container').css('position', 'static'); 
     } 
     else{ 
      $('.container').css('position', 'fixed'); 
     } 
    });

출처

2012-05-26 20:45:43 Zac

위치 : 고정 - 콘텐츠가 Zoom

답변

관련 문제