2013-03-22 9 views
4

내가 조동사의 많은 응용 프로그램을 구축하고 나는 그런 뭔가 모달를 설정해야합니다부트 스트랩 모달 비율을 높이

.modal {상위 5 %; 왼쪽 : 5 %; 오른쪽 : 5 %; 바닥 : 5 %; }

브라우저의 가로 90 %, 세로 90 %의 크기가됩니다. 하지만 스크롤 할 수있는 모달 바디가 필요합니다. 모달 헤더를 사용하며 기능 버튼이 포함되어 있기 때문에 항상 표시되어야합니다.

max-height를 정의하려는 경우 백분율로 표시하더라도 머리글의 너비가 5 %로 설정되었지만 여백이 5px이고 아래쪽 테두리가 1px로 정의되어 있기 때문에 최대 높이를 정의하려는 경우 올바른 숫자가 아닙니다. 이들을 함께 계산할 수는 없습니다. 오버플로를 정의하려면 최대 너비 또는 너비를 정의해야하지만 동적으로 알 수있는 방법이 없으며 백분율이 맞지 않습니다.

아무 해결책도 찾을 수 없기 때문에 긴 모달 스크롤에서 머리글을 스크롤해도 긴 스크롤 가능한 모달에 대해 생각하기 시작했습니다.

내가 원하는 것을 얻을 수있는 방법이 있습니까?

답변

5

이 CSS를 시도 할 수 :

.modal{ 
    width: 90%; /* desired relative width */ 
    min-height:80%; 
    left: 5%; /* (100%-width)/2 */ 
    margin: auto auto auto auto; /* place center */} 

.modal-body{overflow-y:scroll;max-height:none;position:absolute;top:50px;bottom:50px;right:0px;left:0px;} 

.modal-footer {position: absolute;bottom: 0;right: 0;left: 0;} 

Here is an example

가이 일을 알려줘 =) 마법처럼

+0

작품을, 감사합니다! – Viktor