Страница заполнения карты Google, оставшаяся под заголовком

Я пытаюсь сделать заголовок div выше над картой Google, но карта заполнит все остальное содержимое страницы.Страница заполнения карты Google, оставшаяся под заголовком

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

Это мой HTML:

<body> 
    <header>Title</header> 
    <div id="appcontent"> 
     <div id="map-canvas"></div> 
    </div> 
</body>

и CSS:

html, body { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
} 
#appcontent { 
    width: 100%; 
    height: 100%; 
} 
#map-canvas { 
    width: 100%; 
    height: 100%; 
} 
header { 
    width: 100%; 
    height: 40px; 
    background-color: #CFCFCF; 
}

Я сделал скрипку, что я пытаюсь сделать здесь: http://jsfiddle.net/5LVQX/1/

Может

никого помогите мне с этим?

источник

2014-01-09 TFRD

С помощью абсолютного позиционирования, например, так (fiddle)

#map-canvas { 
    position: absolute; 
    top: 40px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
} 
header { 
    position: absolute;  
    top: 0px; 
    left: 0px; 
    right: 0px;  
    height: 40px; 
    background-color: #CFCFCF; 
}

См position: absolute.

источник

2014-01-09 14:13:14 canon

Спасибо, это прекрасно. – TFRD

-1

Быстрое решение, добавьте JS строку:

$("#appcontent").height($(document.body).height() - $("header").height());

jsfiddle: http://jsfiddle.net/5LVQX/3/

источник

2014-01-09 14:15:40

Этот вопрос не помечен тегом: [tag: javascript] или [tag: jquery]. – canon

Спасибо, что сказал мне, я этого никогда не знал! Но поскольку _jQuery_ используется там, не вредит добавлению еще одной строки. –

Помимо ненужных сценариев для обработки дисплея. Кроме того, карта не будет изменять размер с помощью окна в этой реализации. Чтобы исправить это, вам нужно добавить скрипт _more_ для обработки 'window.onresize'. – canon

переполнения: скрытый

на

тело

также должен работать.

Edit:

Потребует

CSS

#appcontent { 
    width: 100%; 
    height: calc(100% - 40px); 
    height: -webkit-calc(100% - 40px); 
}

источник

2014-01-09 14:17:13 Goombah

это скроет часть карты области карты. –

Я слишком быстро обеспечил это, ты прав. Ред. – Goombah

_calc_ - это что-то интересное. Просто нужно знать о поддержке браузера, иначе прекрасна! –

Страница заполнения карты Google, оставшаяся под заголовком

ответ

Смежные вопросы