"고무"레이아웃을 좁은 화면으로 정렬하는 방법은 무엇입니까?

Question

나는 헤더 페이지 (두 래퍼에)있다. 페이지는 왼쪽 메뉴와 내용으로 구성됩니다. 나는 div 레이아웃을 사용한다.

1. 헤더 래퍼 페이지 래퍼 모든 화면 너비를 작성하지만, 그 내용 (헤더와 페이지 자체가) 특정 폭 경계 (최대 및 최소)에있을
2. 다음 행동 : 그리고 다음 원하는 폭 좁은 화면의 경우 :

와이드 스크린 : 좁은

: 그것은 모두 OK입니다 화면 : 모두 괜찮습니다 - 내용에 의해 겹쳐지는 래퍼, 가로 스크롤이 나타납니다. 오른쪽으로 스크롤 후 나는 그 주변에서 나머지 내용 (헤더 페이지)

를 볼 수 있지만 실제로 나는이있다 : 오른쪽으로 스크롤 후 나는 단지 나머지 내용 아니라 그 주변을 볼 수 있습니다!

어떻게 문제를 해결하고 두 번째 이미지처럼 보인다 만드는 방법? http://jsfiddle.net/WxaB3/9/ :

예 (나쁜 경우를 볼 결과 창 좁게).

HTML :

<div id="main"> 
    <div id="header-wrapper"> 
     <div id="header"> 
      <b>header</b> 
     </div> 
    </div> 
    <div id="page-wrapper"> 
     <div id="page"> 
      <div id="leftMenu"> 
       <b>leftMenu</b> 
      </div> 
      <div id="content"> 
       <b>ContentContentContentContent</b> 
      </div> 
     </div> 
    </div> 
</div> 

CSS :

#header-wrapper, #page-wrapper{ 
    width: 100%; 
} 

#header-wrapper{ 
    background: LightCoral; 
} 

#page-wrapper{ 
    background: DeepSkyBlue; 
} 

#header, #page{ 
    min-width: 200px; 
    max-width: 300px; 
    margin: 0 auto; 
    padding: 0 20px; 
} 

#header{  
    background: LightPink; 
} 

#page{ 
    background: LightBlue; 
} 

#leftMenu{ 
    display: block; 
    float: left; 
    width: 70px; 
} 

#content{ 
    margin-left: 70px; 
} 

Answer 1

이 솔루션은 레이아웃 어떤 목적에 따라 달라집니다. 그것이 포럼의 메시지 양식이라면, 어떤 종류의 자르기, 감싸기 또는 숨기기를 지원해야합니다. 관리자 또는 프로그래머가 만든 페이지 인 경우 레이아웃에서 올바른 방식으로 내용을 처리 할 수 ​​있어야합니다. 그리고 다른 많은 경우. 글쎄요, 모든 내용은 내용을 적당히하거나 레이아웃 디자인을 수정하는 것으로 마무리됩니다.

이 특별한 경우에는 레이아웃이 올바르게 작동합니다. 페이지 요소에도 불구하고 전체 내용을 담을 수있는 최대 너비가 충분하지만 페이지의 부모 컨테이너가 좁아 지므로 브라우저 창이 좁아지면 잘못됩니다. 이를 막기 위해 페이지 요소 나 부모 컨테이너의 최소 너비를 내용을 담을 수있는 값으로 제한해야했습니다. 그래서 그냥 "최소 너비 : 340px;"를 추가합니다. 래퍼 또는 주 요소에 연결합니다. 아니면 그냥 페이지 요소 자체의 최소 너비 속성을 늘립니다. 그리고 그 경우에는 콘텐츠 요소의 콘텐츠 너비를 다시 추적해야합니다 (콘텐츠 검토).

Answer 2

당신은 래퍼 div를에 넘치는 아이들을 숨길 필요가있다. 나는 #header-wrapper, #page-wrapper CSS에 overflow: hidden;을 추가했다. jsFiddle를 참조하십시오

http://jsfiddle.net/WxaB3/10/

오버플로 CSS 속성
일반적으로, 블럭 박스의 내용이 상자의 내용 가장자리에 국한된다.

1. 라인은 블록 상자보다 넓게 광고 박스 일으키는 파괴 될 수 없다 : 어떤 경우에는, 상자 월 오버플, 그 내용을 의미하는 것은 예를 들면, 부분적으로 또는 완전히 상자 밖에 . 블록 수준 상자가 포함 된 블록에 비해 너무 넓습니다. 가 함유 블록의 측면 위에 쏟아 생성 블록 상자를 일으키는 요소의 "폭"속성 값을 갖는 경우 발생할 수있다.

2. 엘리먼트의 높이가 에 함유 블록 할당 명시 높이를 초과 (즉,포함 블록의 높이는 콘텐츠 높이가 아닌 '높이'속성에 의해 결정되는 입니다.

3. 자손 상자는 부분적으로 상자 외부에 배치됩니다. 이러한 상자는 조상의 조상의 오버플로 속성에 의해 항상 잘리지는 않습니다. 특히, 자신과 포함하는 블록 사이의 조상 인 의 오버플로로 인해 클리핑되지 않습니다.

4. 자손 상자에 음수 여백이있어 부분적으로 상자 밖으로 위치하게됩니다.

5. 'text-indent'속성을 사용하면 인라인 상자가 블록 상자의 왼쪽 또는 오른쪽 가장자리 인 에서 중단됩니다. 오버 플로우가 발생할 때마다

는 "오버 플로우"속성은 상자 패딩 가장자리에 클리핑하고, 만약 그렇다면, 스크롤링 기구가 어떤 컨텐츠를 클립에 액세스하도록 제공되어 있는지 여부를 지정.

 

오버플로 : 숨겨진;
이 값은 콘텐츠가 클리핑되고 클리핑 영역 외부의 콘텐츠를 보려면 에 스크롤링 사용자 인터페이스가 제공되지 않아야 함을 나타냅니다.

는

참조 : http://www.w3.org/TR/CSS21/visufx.html