Help with Responsive CSS - Height of Bookreader

Posted on 2012-09-10
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 ( 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
    LVL 13

    Expert Comment

    Not sure if you are working on it or not, but it's not opening correctly in IE9...
    LVL 13

    Accepted Solution

    Check out these two sites:

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

    Author Comment

    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

    Mahalo, Nukit...

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    730 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now