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>