고정 헤더로 가변 높이 모드를 만드는 방법

Question

페이지를 벗어나지 않고 내용을 축소하거나 확장 할 수있는 매우 간단한 모달을 만들었습니다. 맨 위와 맨 아래에 항상 10 %의 여백을 남깁니다. 페이지의 크기가 모든 모달 내용을 포함 할 정도로 크지 않으면 전체 모달이 스크롤 가능하게됩니다.

See jsfiddle here

인가 그것을 가능, 헤더는 항상 고정되어 있으므로,이 동작을 복제하지만 모달 몸이 스크롤 될 가지고, 단지 CSS를 사용하여. 나는 몇 가지 시도를 해봤지만 아직 해결 방법을 찾지 못했습니다. 헤더 position: fixed을 거의 만들면 모달 상자 위로 이동 한 다음 본문에 패딩을 추가하여 스크롤 막대를 아래로 움직이지 않는 헤더 아래에 내용이 표시되도록해야합니다. 나는 항상 jss를 윈도우에 바인딩하고 몸체 높이를 수동으로 조작하기 전에 모든 CSS 대안을 다 소모하는 것을 선호한다.

Answer 1

... 오히려 .wrap보다는 .body에 max-height 및 overflow-y 설정 적용?

편집 1 :

아무것도 지금까지 제약 내에서 켜져없는 것, (헤더 높이 또는 PX 마진에 사용 %) 자바 스크립트 또는 제약에서 벗어나고 중 하나를 제안합니다.

편집 2 :

다음은 헤더 높이 %를 사용하여 initial demo입니다. 머리글 태그에 px min-height을 추가하여 매우 작은 화면에서 헤더가 거의 사라지지 않도록하고 (상단의 여백을 줄임) (매우 작은 화면에서는 축소 됨).

화면 크기가 400px 이상인 경우 높이 (10px 높이의 40px 헤더)만큼 정확하게 작동해야합니다. 헤더의 높이를 줄인 경우 약간 작은 화면을 지원합니다 (높이가 10 % 인 30px 헤더는 300px 화면 이상을 지원함). 30px 헤더가있는 demo입니다.

그것은 서투른 해결책이지만 JavaScript를 사용하지 않고 나타난 유일한 해결책입니다.

도 I은 h2와 .content 태그를 추가하고 (지정된 % 값보다 크고 높이로 이어진다) 동일한 요소 % 신장 및 패딩을 조합 피하기 위해 그곳 padding:10px; 이동 있습니다.

Answer 2

이것은 늦을 수도 있지만 유사한 문제인 고정 헤더, 유체 높이, 유체 너비를 해결해야합니다.

• 이 당신의 요소를 경계 박스 상자 크기 조정 보내기

  이

  내가 문제를 달려 드는 방법이다. 래퍼를 사용하여 경계 상자를 가운데 맞추고 만듭니다. 이것은 최소 너비와 최대 너비 + 백분율을 가진 유체 일 수 있습니다.
• 콘텐츠 요소에 auto overflow-y를 지정하고 최대 높이를 100 %로 지정하십시오.
• 상자 크기 사용 : 테두리 상자;

전체 코드는 다음과 같이해야한다 :

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
.modal { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.8); 
} 
.wrap { 
    position: relative; 
    margin: 0 auto; 
    display: block; 
    width: 90%; 
    /* Change the max-width value on a media query breakpoint to make this example more "responsive" */ 
    max-width: 500px; 
    height: 90%; 
    padding: 30px; 
} 
.modal header { 
    height: 30px; 
    padding: 0; 
    color: #FFF; 
    background-color: #007; 
} 
.modal .body { 
    background-color: #FFF; 
    max-height: 100%; 
    overflow-y: auto; 
} 

http://jsfiddle.net/mariomc/EhR7r/