만들기 테이블 대화 내용

I는 다음과 같이 설정 대화 상자가 있습니다만들기 테이블 대화 내용

<div style="position:fixed; display:block; width:600px; top:0; left:50%;margin-left:-275px;"> 
    <table style="width:100%;" cellpadding="0" cellspacing="0"> 
    <tbody> 
     <tr> 
     <td> 
      <div class="modal-header"> 
      <span class="close">×</span> 
      <h2>Modal Header</h2> 
      </div> 
     </td> 
     </tr> 
     <tr> 
     <td style="background-color:gray;"> 
      <table> 
      <tbody> 
       <tr> 
       <td> 
        <div class="modal-body"> 
        <p>variable length really long stuff</p> 
       </td> 
       </tr> 
      </tbody> 
      </table> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <div class="modal-footer"> 
      <h3>Modal Footer</h3> 
      </div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div>

는 지금, 대화의 내용이 페이지에 대한 너무 오래이며, 위치가 고정되어 있기 때문에, 사용자가 절대로 대화 상자의 맨 아래로 스크롤 할 수 없습니다. 내용의 길이가 뷰포트 영역을 초과 할 때만 내부 테이블을 스크롤 할 수있게하고 싶습니다. 그러나 헤더와 바닥 글이 항상 보이기를 바랍니다.

Here is a code sample. 어떻게하면됩니까? 당신이 좋아 vh 단위를 사용하는 경우

출처

2016-07-07 CC Inc

모달을 항상 100 % 높이로 만드시겠습니까? 머리글과 바닥 글 고정 높이가 있습니까? – Stickers

@Pangloss 모달은 그 안에있는 내용의 높이와 같아야합니다.하지만 내용이 한 페이지에 들어 가지 않으면 스크롤 할 수 있어야합니다. 예, 머리글과 바닥 글은 고정 된 높이이지만 모달 내용은 서버에 따라 다릅니다. –

, 당신은 스크롤 modal-body을 강제 할 수 : 당신이 vh 단위를 사용하지 않으려면

.modal-body { 
    padding: 2px 16px; 
    overflow:auto; 
    max-height: calc(100vh - 144px); /* 144px represents the combined height of the modal header and footer */ 
}

, 당신은 프로그래밍에 오버 플로우를 전환해야 할 수도 있습니다 body 모달이 나타날 때. 페이지가 돌아 가지 않도록 오버플로를 변경할 때 scrollTop 위치를 수동으로 설정해야 할 수도 있습니다.

출처

2016-07-07 17:01:49 Quantastical

안녕하세요. 그 대답은 훌륭하지만, 다른 누군가가 아이디어를 가지고 있는지를 기다릴 것입니다. calc와 vh가 사용 승인을받는 것이 고통 스러울 것입니다. –

나는'vh' 단위를 이해할 수있다. 그래서 나는 그것을 지적했다. 'calc'는 꽤 광범위하게 지원되지만, 여러분이 그 코멘트를 작성한 이후 IE9 이하가 필요하다고 생각합니다. 이것을 우아한 후퇴와 함께 사용하려면 JavaScript를 사용하여 적절한 최대 높이를 계산하고 모달을 열거 나 브라우저의 크기를 조정하거나 방향을 변경할 때마다이를 설정할 수 있습니다. – Quantastical

만들기 테이블 대화 내용

답변

관련 문제