Dynamic height of main block

Question

On the page, there are 3 blocks (header, main and footer). 4th (apple_ios_status_bar_background) is hidden by default and displayed (or hidden) dynamically in code. When this unit is not displayed, you can see all 3 blocks on the page. If the display 4th block - the block footer goes down the page. It is necessary that would block main changed its height dynamically (all blocks should always be visible on the page).

Code https://jsfiddle.net/j3qm5qgx/1/

In JS detect iOS system, if true - show apple_ios_status_bar_background block, hide if false.

enter image description here

@BipBip On the page, there are 3 blocks (`header`, `main` and `footer`). 4th (`apple_ios_status_bar_background`) is hidden by default and displayed (or hidden) dynamically in code. When this unit is not displayed, you can see all 3 blocks on the page. If the display 4th block - the block footer goes down the page. It is necessary that would block main changed its height dynamically (all blocks should always be visible on the page). — Vladimir Z., Jun 03 '15 at 08:51
I don't understand your question. Is it about detecting an apple device? http://stackoverflow.com/questions/9038625/detect-if-device-is-ios — Ron van der Heijden, Jun 03 '15 at 09:11
@Bondye No. I detect iOS device and show block `apple_ios_status_bar_background` with `$("#apple_ios_status_bar_background").show()`. After `show()`, `footer` block beyond the visible area of the page (image 1). — Vladimir Z., Jun 03 '15 at 09:19
Use sth like `document.getElementById("apple_ios_status_bar_background").style.display = "";` — Elyor, Jun 03 '15 at 09:23
@Elyor use your code, but nothing change. May be this picture helps [link](https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/Art/safarimetrics.jpg) - i need all blocks in **Visible area** of Safari. — Vladimir Z., Jun 03 '15 at 09:31

Lain · Accepted Answer · 2015-06-03T11:40:52.680

0

In your fiddle you did not include jQuery and second you did not define iOS. If you do so it works as you wanted it to.

var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);

https://jsfiddle.net/j3qm5qgx/4/

Note that Safari does not really mean iOS and that you could solve that issue in css with media device.

If you do not want your footer to go offscreen, you could set it on bottom via css:

footer {
    position: absolute;
    bottom: 0px;
    height: 20px;
    width: 100%;
    background-color: #dff0d8;
}

https://jsfiddle.net/j3qm5qgx/5/

Another way would be to change it by jquery, since main now is 20 pixels more short:

if (iOS) {
    $("#apple_ios_status_bar_background").show();
    $('main')[0].style.height = 'calc(100% - (40px + 20px + 20px))';
} else {
    $("#apple_ios_status_bar_background").hide();
}

https://jsfiddle.net/j3qm5qgx/6/

edited Jun 03 '15 at 11:40

answered Jun 03 '15 at 11:24

Lain

3,117
1
13
23

I dropped part of the code does not required, which not related to this issue. Check for iOS works fine, this is no problem. When opened this page with iOS (ex. iPhone) and displayed unit `apple_ios_status_bar_background`, the `footer` at the bottom slides down and it is not visible in the portrait orientation (if you turn in the landscape - the block `apple_ios_status_bar_background` is hidden and then the `footer` is visible). – Vladimir Z. Jun 03 '15 at 11:32
Ah alright, I understand. The height is your problem. – Lain Jun 03 '15 at 11:33
1

This is what you need when you show the apple only content: $('main')[0].style.height = 'calc(100% - (40px + 20px + 20px))'; – Lain Jun 03 '15 at 11:35
Great, this is what I need. Thank you. – Vladimir Z. Jun 03 '15 at 11:42

Dynamic height of main block

1 Answers1