Как заставить div расти вместе со своими дочерними элементами, когда встроенные блоки больше не подходят

так что у меня есть этот код

        <div class="contentBlock">
            <div id="profileBlock">
                <div id="imageContainer"></div>
                <div id="textBlock">                
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>  
            </div>
        </div>

css

.contentBlock
{
    display: inline-block;
    width: 100%;
    height: 100%;
}

#profileBlock
{
    text-align: center;
    margin: 25px 25px;
    height: 350px;
}

#textBlock
{
    width: 50%;
    display: inline-block;
    margin: 0px 25px;
}

#imageContainer
{
    vertical-align: top;
    display: inline-block;
    width: 250px;
    height: 300px;
    background-image: url('http://placehold.it/250x300');
    background-repeat: no-repeat;
}

https://jsfiddle.net/h21f2882/

По сути, это раздел моего сайта-портфолио. Я пытаюсь разместить изображение заполнителя рядом с моим текстом. Однако, когда я изменяю размер своего браузера, текст оказывается под изображением, и это не та проблема, которую я пытаюсь решить. Однако проблема в том, что контейнер не масштабируется. Позволить всему textBlock div выйти за его границы.

Теперь у меня два вопроса:

  1. Если бы я сделал медиа-запрос, в котором я бы изменил дисплей обратно на блок и изменил размер profileBlock на X пикселей. Будет ли это плохой практикой, поскольку я буду использовать магическое число для установки высоты?

  2. Как я могу изменить высоту этого контейнера, чтобы он соответствовал его дочерним элементам после этого события?

Спасибо нападающему Максу Бикмансу


person Max Beekmans    schedule 19.10.2015    source источник


Ответы (1)


Ты был почти там. Вам просто нужно добавить две строки кода:

  1. html, body { height: 100%; }

    Поскольку вы используете высоту в процентах в .contentBlock, вам нужно указать высоту родительских элементов в данном случае, body и html. Без этого кода height: 100% в .contentBlock ничего не делает.

    Объяснение использования процентной высоты в CSS см. в моем ответе здесь:
    Работа со свойством CSS height и процентными значениями

  2. #profileBlock { min-height: 350px; }

    Вы установили фиксированную высоту в контейнере для изображения и текста (#profileBlock { height: 350px; }). Это зафиксирует высоту на месте. Вместо этого установите минимальную высоту. Затем он будет расширяться по мере роста содержимого.

    Также рассмотрите возможность установки min-height на .contentBlock. Затем он расширится, чтобы вместить .profileBlock.

    ДЕМО: https://jsfiddle.net/h21f2882/2/

person Michael Benjamin    schedule 19.10.2015
comment
Дайте этому человеку печенье, пожалуйста ^^ ой, и если вы не возражаете, у меня есть еще один вопрос. Я использую много идентификаторов в своем html, но я не вижу причин использовать классы, должен ли я попытаться украсить это? и мне как-то трудно назвать мой идентификатор, что бы вы посоветовали мне сделать? В Java и С# есть много документального фильма о том, как его назвать, какие заглавные буквы, а какие нет, но я не могу найти, что это html css - person Max Beekmans; 19.10.2015
comment
Вот ты это заслужил! файл cookie - person Max Beekmans; 19.10.2015
comment
Если вы планируете использовать что-то один раз на странице, вы можете использовать id (например, id="main-container"). Если вы планируете повторять блок кода для нескольких элементов, используйте class (например, class="nav-link"). Дополнительные сведения см. в этом сообщении. - person Michael Benjamin; 19.10.2015
comment
Что касается соглашения об именах для классов и идентификаторов, см. мой ответ здесь: stackoverflow.com/a/31911732/3597276 - person Michael Benjamin; 19.10.2015