100% высокий div в контейнере загрузочного твитера

-1

Я пытаюсь поместить карту карты Google на 100% в контейнер Bootstrap Twitter, но она отображает 0px в высоту.100% высокий div в контейнере загрузочного твитера

Из того, что я понял из Twitter Bootstrap: div in container with 100% height я добавил класс CSS в DIV контейнер-жидкости с "высота: 100%; мин-высота: 100%;", но это не имеет никакого значения:

<body> 
    <div class="container-fluid tall"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <div id="map-canvas"></div> 
     </div> 
... 

#map-canvas { 
    width: 100%; 
    height: 100%; 
    margin-bottom: 15px; 
    border: 2px solid #000000; 
} 

.tall { 
    height: 100%; 
    min-height: 100%; 
}

источник

2016-08-18 Ian

Почему downvote? – Ian

Вы также добавили 'html, body {height: 100%; } ', а также всем предкам картой-холста потребуется высота, установленная на них - для любой высоты в процентах вы должны иметь высоту для всех предков до тех пор, пока не будет найдена фиксированная высота, если фиксированная высота то высота процента должна пройти весь путь назад к телу и html-тегам – Pete

Хорошая идея @Pete, просто попробовал, а также min-height: 100%. Однако никакого эффекта. – Ian

Я/думаю/я, возможно, отсортированный это, основываясь на комментариях Пита (так на самом деле это/его/ответ).

кажется, что/каждый/элемент вниз в контейнере карты требуется высокий класс, а сам контейнер карты требует «высоты: 100%; мин-высота: 600px;», что-то вроде:

html, 
body { 
    height: 100%; 
    min-height: 100%; 
} 

.tall { 
    height: 100%; 
    min-height: 100%; 
} 

#map-canvas { 
... 
    height: 100%; 
    min-height: 600px; 
}

Не уверен, если это самозагрузки требования или Google Maps один

(я поставил комментарий в предупреждении О.П., что я не был. гуру CSS, но кто-то его удалил. Прошу прощения, если отсутствие того, что вводит в заблуждение кого-либо, чтобы я думал, что я знаю, что я делаю.)

источник

2016-08-18 13:35:25 Ian

Вы используете селектор идентификаторов CSS #tall, но указали класс высокого в HTML. Вам нужно будет изменить #tall на .tall в CSS.

Я также был возиться с CodePen, и, казалось бы, что вам нужно либо указать #map-canvas высоты на основе высоты окна (ОЕ), или указать высоту для всех родительских див до и , включая, где вы указываете фиксированную высоту, которую вы хотите, чтобы карта занимала. Обратите внимание, что margin-bottom не будет влиять на #map-canvas и что вам не нужно указывать minimum-height.

Проверьте приведенную ниже CodePen для реализации, демонстрируя, как родительский div может указывать высоту карты. Карта DIV имеет ширину и высоту 100% от родителей, и адаптирует соответственно:

http://codepen.io/Obsidian-Age/pen/AXzXzv

источник

2016-08-18 11:15:15

Хороший улов. Это заставляет меня чувствовать себя stoopid :) К сожалению, хотя это не устраняет проблему. – Ian

Я обновил свой ответ, и он, надеюсь, теперь решит вашу проблему :) –

Вы можете изменить свой код, чтобы быть похожим на код ниже: изменение HTML на:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <div id="map-canvas"></div> 
     </div> 
    </div> 
</div>

и изменения CSS в

#map-canvas { 
    width: 100%; 
    min-height: 100vh; 
    height: 100%; 
    margin-bottom: 15px; 
    border: 2px solid #000000; 
}

здесь предварительный:

http://codepen.io/mhadaily/pen/RRdXpY

источник

2016-08-18 11:22:36 Majid

Спасибо Majid. Однако это не работает с контейнером Bootstrap. – Ian

, пожалуйста, посмотрите http://codepen.io/mhadaily/pen/RRdXpY, его также можно применить к бутстрапу. не беспокойся. проверьте ссылку. – Majid

100% высокий div в контейнере загрузочного твитера

ответ

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