0

in my html, Header and Footer are fixed but body content overlaps with header and footer. I want to display my content between header and footer without overlap. How can it be achieved ?

Please help me regarding this.i'm using this CSS code mentioned below. You may check it and resolve this problem.

<style type="text/css">
        @media print {
            #header {
                display: table-header-group;
                position: fixed;
                top: 0;
                left: 0;
                margin: 0px;
                padding: 0px;
                width: 100%;
            }

            #body {
                /*position: absolute;
                height: 80%;
                margin-top: 0em !important;
                margin-bottom: 1em !important;
                padding: 2em 0 0 0;
                margin:0 auto;*/
                position: absolute;
                margin-top: 10% !important;
                margin-bottom: 5% !important;
                height: 80%;
                overflow: visible;
                text-align: justify;
                width: 90%;
            }

            #footer {
                display: table-footer-group;
                position: fixed;
                bottom: -0.6em;
                left: 0;
                margin: 5em 0px 0px 0px;
                padding: 0px;
                width: 100%;
                /*clear:both;*/
                /*padding-top:98%;*/
                /*padding-bottom:1em;*/
                /*page-break-after: avoid;*/
            }
        }



        @media screen {
            #thead {
                display: block;
                /*padding-right: 5.9em;
                padding-left: 6px;*/
                width: 100%;
                /*height: 5%;*/
            }

            #tbody {
                display: block;
                /*height: 80%;
                vertical-align: central;
                padding-top: 5em;
                padding-bottom: 3em;*/
                text-align: justify;
                width: 100%;
                margin-top: -5em;
            }

            #tfoot {
                display: block;
                /*padding-right: 6em;
                padding-top: 2em;*/
                width: 100%;
                /*height: 4%;*/
            }
        }
    </style>
Nagendra Singh
  • 1
  • 1
  • 5

1 Answers1

0

This snippet shows an example of fixed header and footer (with variable height) and content that takes the remaining space. The trick here is to use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body {
  overflow: hidden;
}

.content-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#header {
  position: relative;
  width: 100%;
  background-color: green;
}

#body {
  position: relative;
  width: 100%;
  background-color: blue;
  overflow: auto;
}

#footer {
  position: relative;
  width: 100%;
  background-color: red;
}
<div class="content-container">
  <div id="header">
    <div style="height: 40px;"></div>
  </div>

  <div id="body">
    <div style="height: 1000px;"></div>
  </div>

  <div id="footer">
    <div style="height: 20px;"></div>
  </div>
</div>
Loïc Bellemare-Alford
  • 538
  • 5
  • 12
  • In this case while I choose print preview then only single page show because in content-container we use fixed position. how can I set in print preview page with all content set in proper way with margin and padding. I've Large amount of data to print but with this code only single page show in print preview. Please rid me off from this problem – Nagendra Singh Dec 30 '17 at 06:40
  • @NagendraSingh I misunderstood the question. You want the body content to span on multiple pages when printed but the header and footer to be repeated, is that right? – Loïc Bellemare-Alford Dec 30 '17 at 06:47
  • If it's the case, HTML/CSS doesn't have any ways to print a header and footer on pages with middle content that spans on multiple pages. See: https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document – Loïc Bellemare-Alford Dec 30 '17 at 06:50
  • Yes, Exactly. I want the same as you told now. – Nagendra Singh Dec 31 '17 at 07:12
  • I always ended up generating PDFs on the server side. There are JavaScript librairies to generate PDFs but are rarely as complete as the ones on the server side. The other way is to format your HTML when printing to add the exact content on each page using relative position. But this would require JavaScript. If you are interested in an example, let me know. – Loïc Bellemare-Alford Dec 31 '17 at 14:31