How do I add a status bar to a BakerFramework Newsstand App without leaving space under the content?

Question

I am trying to add a black status bar into my BakerFramework for iOS Newsstand App when issues are viewed in iOS 7+. Previously in iOS 7+, the status bar disappeared when issues were viewed.

The first "page" of the magazine is the cover page, and consists of an HTML page with an IMG tag in the body, which is sized to max-width:100% max-height:100%. In Safari, viewing that HTML file, resizing the window to the proper aspect ratio, the image simply fills the screen and there is nothing else -- no additional spaces or anything. The image is of the correct aspect ratio (1536px x 2008px) to fit in the iPad screen under the status bar and then fill the screen perfectly. Now initially, without the status bar, the IMG fills the iPad screen except for an empty 20px space at the bottom. But when we add the 20px status bar to the top, everything should be perfect, right?

I added this code into the didFinishLaunchingWithOptions method:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
{
    self.window.clipsToBounds = YES;
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
    [self.window setAutoresizingMask:UIViewAutoresizingNone];
    self.window.frame =  CGRectMake(0, 20, self.window.frame.size.width, self.window.frame.size.height-20);
    self.window.bounds = CGRectMake(
        self.window.frame.origin.x,
        self.window.frame.origin.y,
        self.window.frame.size.width,
        self.window.frame.size.height
    );
}

...and this into the BakerViewController.m file:

- (BOOL)prefersStatusBarHidden {
    return NO;
}

This gives me a status bar like I want, and it moves my content down 20px so that the status bar is not overlaying my content and so that the cover IMG fills the rest of the screen perfectly. However, it also seems to keep the empty 20px space underneath my content, shoving that space off-screen! Since this is a BakerFramework App, all my content is HTML. In the HTML, sometimes we have a CSS position:fixed bottom:0 element on some pages. This fixed position element seems to locate itself along the base of the bottom space, 20px under the bottom of the screen, instead of along the base of the screen itself! I expected the bottom space to be completely removed by the above code changes, but it has not been.

It's like the code above doesn't actually resize the HTML document window... rather it only moves the HTML document window down by 20px. I need to actually resize the HTML document window.

I am very, very new to iOS development, so I will need hand-holding. If you have any suggestions for me to get rid of the empty 20px space under my content, I would very much appreciate them.

Thanks!

Answer 1

Finally figured out a fix. Had to add: pageHeight = pageHeight - 20; to the setPageSize method in BakerViewController.m. Hope this helps someone.