PDF Type view using html and css. Page overflow problem

I am trying to create a “document viewer” of sorts using html and css. I’m wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.

I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.

<div class="paper">

</div>

Within this I have children divs setup with a class of page. This is where all the content sits for the page.

<div class="page">

</div>

My problem is when the content gets too long for a page and you scroll to the next “page” it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.

CodePen

CodePen Link Here

Answer

You can change your page class in CSS with this:

.page {
  height: 100%;
  margin-bottom: 15px;
  padding: 20px;
  display: table;
  text-align: center;
}

Leave a Reply

Your email address will not be published. Required fields are marked *