Карты Google остаются в верхнем левом углу

Я хочу разместить карты Google в нижней части моей страницы, но независимо от того, какие цифры я вставляю, он держится в верхнем левом углу и не сдвинется с места. Я могу изменить его размер, но я не могу изменить позицию. Любая помощь?Карты Google остаются в верхнем левом углу

HTML:

<iframe 
    marginwidth="0" marginheight="0" scrolling="no" width="422" height="300" 
    frameborder="0" scrolling="no" 
    src="https://maps.google.ca/maps?ie=UTF8&amp;cid=7805933538308657347&amp;q=Hibiscus&amp;gl=CA&amp;hl=en&amp;t=m&amp;z=16&amp;iwloc=A&amp;output=embed"> 
    </iframe>

CSS:

.iframe { 
    position: absolute; 
    padding-bottom: 65%; 
    padding-top: 30px; 
    overflow: hidden; 
    top: 8000px; 
    left: 400px; 
    width: 100%; 
    height: 100%; 
    }

источник

2013-03-25 user2208462

Просто поместите IFRAME в колонтитула теге вашей страницы.

HTML

<html> 

<body> 
stuff... 
</body> 
<footer> 
<iframe style="width:100%; height:100%; position:absolute;" 
    marginwidth="0" marginheight="0" scrolling="no" width="422" height="300" 
    frameborder="0" scrolling="no" 
    src="https://maps.google.ca/maps?ie=UTF8&amp;cid=7805933538308657347&amp;q=Hibiscus&amp;gl=CA&amp;hl=en&amp;t=m&amp;z=16&amp;iwloc=A&amp;output=embed"> 
    </iframe> 
</footer> 
</html>

CSS

.iframe { 
position: absolute; 
padding-bottom: 65%; //65% padding-bottom is massive... are you sure you want that much? 
padding-top: 30px; 
width: 100%; 
height: 100%; 
//overflow:hidden; Why that? Doesn't do anything usefull in this situation. 
//left:400; Is it supposed to be 400px? If so, your page is pretty huge considering you have a map the size of your page. 
}

источник

2013-03-25 17:42:20 snaplemouton

Я пробовал тег footer и, похоже, не работает. Однако я исправил 400px, padding и overflow. У меня была ширина карты в виде блоков текста, поэтому она составляет 400 пикселей. – user2208462

Есть ли какой-нибудь другой CSS, который изменяет ваш iFrame? Потому что, когда я тестирую это на w3school «Попробуйте», он работает отлично. Вы используете мастер-страницу? Убедитесь, что тег нижнего колонтитула уникален на странице. Щелкните правой кнопкой мыши на своей странице и проверьте исходный код. – snaplemouton

Я использую одну главную внешнюю страницу css, и ничто другое не является частью iframe, кроме тех, которые я изложил выше. Он работает на w3school и jfiddle, но я до сих пор не понимаю, почему он остается на вершине. – user2208462

Поскольку вы реализуете позиции абсолютной, я думаю, вы можете просто добавить bottom:0; в классе Iframe, если вы хотите, чтобы всегда быть в нижней части страница

.iframe { 
    position: absolute; 
    bottom:0; 
    overflow: hidden; 
    left: 400px; <-- do you want to set margin on the left side of the map? 
    width: 100%; 
    height: 100%; 
    }

источник

2013-03-25 18:51:28

Я думаю, что ваша проблема заключается в вашем CSS. У вас есть .iframe, что означает, что любые элементы с class="iframe" наследуют эти свойства. Ваш html, который вы указали, не похож на класс iframe. Вы можете сохранить свой CSS так же и добавить class="iframe" в свой iframe или изменить .iframe на iframe в своем CSS. Лично я бы с .iframe и добавить class="iframe" к iframe, но я бы переименовать класс что-то вроде .google-maps

<iframe class="iframe" ...></iframe> 

iframe /*or*/ .iframe{ 
    position: absolute; 
    padding-bottom: 65%; 
    padding-top: 30px; 
    overflow: hidden; 
    top: 8000px; 
    left: 400px; 
    width: 100%; 
    height: 100%; 
}

EDIT: Глядя на ваш вопрос еще раз у меня есть предложение попробовать позицию: {абсолютный, относительный или фиксированный}, чтобы увидеть, меняется ли атрибут позиции, который может решить вашу проблему.

источник

2013-03-28 05:43:03 Class

Карты Google остаются в верхнем левом углу

ответ

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