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>