div 인쇄 중 레이아웃 문제가 발생했습니다.

Question

저는 긴 div 구조의 레이아웃을 코딩하고 있습니다. 페이지 높이가 짧으면 파란색 섹션을 독립적으로 원합니다. 당신이 끈적 끈적한 바닥 글을 만들려고 노력하는 것처럼

Answer 1

는 소리. 파란색 섹션의 높이를 알고있는 경우이 CSS-Tricks post에 설명 된 고정 바닥 글 메서드를 사용할 수 있습니다. 여기

는 ... 그 방법에 따라 예입니다

html, body { 
 
    height: 100%; 
 
} 
 
.top { 
 
    min-height: 100%; 
 
    /* equal to bottom height */ 
 
    margin-bottom: -142px; 
 
} 
 
.top:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.bottom, .top:after { 
 
    /* .push must be the same height as bottom */ 
 
\t height: 142px; 
 
} 
 
.bottom { 
 
    background: #ccc; 
 
}

<div class="top"> 
 
    <h1>Top</h1> 
 
</div> 
 

 
<div class="bottom"> 
 
    <h1>Bottom</h1> 
 
</footer>