2
Есть такой html:
    <div class="contacts__content cf">
            <div class="info f_left">
            </div>
            <div class="location  cf f_right">
                <div class="map f_left">
                    <section id="google-map">
                        <div id="google-container"></div>
                        <div id="zoom-in"></div>
                        <div id="zoom-out"></div>
                        <address>улица Артема, 80, Киев, город Киев, Украина</address>
                    </section>
            </div>
        </div>
    </div>

Нужно, чтобы класс .info был в высоту как .contacts__content. Если я сейчас ставлю height:100%, то блок схлопывается и без padding не показывается.

2 ответа 2

3

Пример с использованием flex

.container {
  display: flex;
  width: 400px;
  margin: 0 auto;
}

.col-1 {
  flex: 1;
  outline: 1px solid black;
}

.col-2 {
  flex: 2;
  outline: 1px solid blue;
}
<div class="container">
  <div class="col-1">
    1
  </div>
  <div class="col-2">
    2
    <br /><br /><br /><br /><br />
  </div>
</div>

<br /> Добавлено, чтобы визуально раздвинуть правый блок, и вместе с ним пространство блока container займет левый блок, и наоборот.

4
  • Спасибо. Пока что не помогло, но это что то интересное. По-гуглю) 2 июн 2016 в 9:00
  • @НикитаЩипилов как это не помогло? Пример рабочий, значит вы что то не правильно делаете 2 июн 2016 в 9:11
  • А, я паддинг не убрал)Теперь круто) А это не костыль? 2 июн 2016 в 9:23
  • @НикитаЩипилов нет, не костыль. flex кроссбраузерная технология. Почитайте о ней, она решает огромное количество проблем, которые как раз решались костылями. 2 июн 2016 в 10:27
0
.info {
    position: absolute; 
    top:0;
    bottom:0;
}
3
  • Либо использовать flex. Пора бы уже :) 2 июн 2016 в 8:10
  • не сработает если у родителя position:static или не установлен
    – Grundy
    2 июн 2016 в 8:13
  • Нет, абсолют туда не вставить. Или обертку делать... 2 июн 2016 в 8:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.