проблема с раскладкой div во время печати pdf

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>