[SalesForce] Visualforce page header and footer content not displaying completely

Component Code : 

<apex:attribute required="true"  type="string" name="type" description="specify header and footer type" />
<apex:stylesheet value="{!$Resource.dynamicStylePdf1}"/>
<div class="{!type}">
 <apex:componentBody/>
</div>

Style-sheet Code : 

@page {
@bottom-left{
    content: element(footer);
}
@top-center
    content: element(header);
        }
}
div.header {
position: running(header);
}
div.footer {
display: block;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
@page :first {
    @bottom-right {
        }
    @top-center {
        }
@top-left {
        }
    @bottom-left {
        }
}

Apex Code : Image

Best Answer

Can you try update the CSS as: 

<style>
    @page {
        margin-top: 4cm;
        margin-bottom: 3cm;
        @top-center {
            content: element(header);
        }
        @bottom-left {
            content: element(footer);
        }
    }

    div.header {
        padding: 10px;
        position: running(header);
    }
    div.footer {
        display: block;
        padding: 5px;
        position: running(footer);
    }
    .pagenumber:before {
        content: counter(page);
    }
    .pagecount:before {
        content: counter(pages);
    }
    div.content {
        border-style:dotted;
        float: left;
        width: 100%;
    }
</style>

Please try and let me know!

Related Topic