Установить высоту относительно других элементов

Question

Я работаю над страницей карты Google для сайта jquerymobile.У меня карта ведет себя так, как мне хочется, и она красиво отображается, но элемент карты слишком большой - я не могу понять, как его масштабировать, чтобы заполнить все доступное пространство между верхним и нижним колонтитулом.

Итак, у меня есть:

верхний колонтитул (скажем, его высота 30px) нижний колонтитул (скажем, его высота 20px)

Так как для мобильных устройств очень много разных размеров экрана, верноТеперь я хочу, чтобы map_canvas имел высоту устройства минус 50 пикселей в высоту.Могу ли я сделать это в CSS или мне нужно использовать JavaScript?(Не против этого, но было бы здорово использовать чистый CSS ...)

Answer 1

Вы можете использовать height: calc(100% - 50px) в современных браузерах.

Answer 2

Из-за общей шумихи в области просмотра, авто-высота является скользкой проблемой и не реализована надежно.

Мне нужно было реализовать нечто подобное раньше на моих мобильных сайтах, и я нашел эту статью о Quirksmode бесконечно полезной - http://www.quirksmode.org/mobile/viewports.html

В вашем случае вы бы хотели, чтобы высота была document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())

или, если вы хотите жестко, document.documentElement.offsetHeight - 50. Конечно, жесткое кодирование значения - это менее приемлемый способ.

Answer 3

Вы можете использовать JavaScript или относительную высоту.Например, установите высоту заголовка, скажем, 10%, нижний колонтитул - 20%, а затем вы можете установить высоту своей карты на 70%.