-1

I am coding a lengthy div structured layout. I want the blue section independent if page height is short.

example

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user1581108
  • 1
  • 1
  • suggest you edit your question - I think you are looking for sticky footer e.g. http://stackoverflow.com/questions/21805590/css-sticky-footer – Dex Dave Nov 16 '16 at 18:46

1 Answers1

0

Sounds like you're trying to make a sticky footer. If you know the height of the blue section you can use the sticky footer method described in this CSS-Tricks post.

Here's an example based on that method...

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 */
 height: 142px; 
}
.bottom {
  background: #ccc;
}
<div class="top">
  <h1>Top</h1>
</div>

<div class="bottom">
  <h1>Bottom</h1>
</footer>
shanzilla
  • 467
  • 4
  • 16
  • thanks you for the reply but i dont want a sticky footer, actually i m printing pdf, but when layout exceeds from its page height, its structure breaks. – user1581108 Nov 16 '16 at 18:51
  • How does the structure break? Are you trying to find a way to insert a page break in your html? – shanzilla Nov 16 '16 at 18:55
  • i want to separate blue section if page height is short. actually red and blue section is within a div for testing. i used this css .page-break{ display: block; width:100%; float:left } @media print { .page-break, .page-break div { display: block; page-break-before: always; width:100%; float:left; } } – user1581108 Nov 16 '16 at 19:00
  • Can you create a snippet in your original post to duplicate your code? It's not clear from your post what you're trying to accomplish or what problem you're having. – shanzilla Nov 16 '16 at 19:04