Help with Responsive CSS - Height of Bookreader

Posted on 2012-09-10
Medium Priority
Last Modified: 2012-09-12
Please see:


then click on "Read Full Screen" (=full browser window)


this is using the Monocle web book reader framework. The developers (in Australia)


 have opened source the core, but they do not provide many hooks/ very lean API. ergo even features they use on their platform (https://booki.sh/) are not obvious to implement if you adopt their JS.

We have gotten as far as getting the full screen reader to work -- well, almost -- it is responsive to browser window width changes by the user... but "for the life of me" (and my developer who is great with JS-PHP code, but CSS baffles him) we are unable to get that book frame to be responsive to the browser window screen height changes

He was wasting a lot of time on it and I asked to stop and let me see if the CSS geniuses here might have some clue as to what we need to change.

It is hard coded to the height at the moment... but we would like this to go full screen and follow the user's changes to her browser window.
Question by:Sivakatirswami
  • 2
  • 2
LVL 13

Expert Comment

by:Andrew Derse
ID: 38387995
Not sure if you are working on it or not, but it's not opening correctly in IE9...
LVL 13

Accepted Solution

Andrew Derse earned 2000 total points
ID: 38388019
Check out these two sites:



Per their description, pad the outer wrapper with a percentage...as the screen changes, then the content height on the inside will change as well.

Author Comment

ID: 38393419
Eureka! Thanks for the link... since we are not doing a ratio I did not need to set padding on the containing div... this works fine just like this:

<body style="background-color:#000000;">
      <div id="readerCntr">
        <div id="book" style="position: absolute;top: 2.5%;left: 2.5%;width: 95%;height: 95%;">Loading book...</div>

the monocle.js pokes the #book with the contents of the book.

Author Closing Comment

ID: 38393421
Mahalo, Nukit...

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question