Блог

Главная - Вопросы по программированию - Расположить дочерний элемент абсолютно без высоты в родительском

Расположить дочерний элемент абсолютно без высоты в родительском

#html #css #position #height

#HTML #css #позиционировать #высота

Вопрос:

У меня есть абсолютно позиционированный div внутри a без высоты.

Мне нужно убедиться, что дочерний элемент «заполняет» доступное пространство высоты внутри родительского элемента, т. е. будет иметь красный фон, если это работает правильно: http://jsfiddle.net/richardblyth/AvSr9 /

(Это адаптация требования к клиентскому проекту, над которым я работаю …)

 <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">     
        <title>A Blank HTML Doc</title>

       <style type="text/css">
        section {
            position: relative;
            width: 600px;
        }
        div.content {
            height: 100%;
            width: 100%;
            top: 0;
            position: absolute;
            background: red;
        }
        </style>
    </head>

    <body>
        <section>
           <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula urna sit amet nibh facilisis, vitae feugiat felis imperdiet. Nunc facilisis ac tortor at rutrum. Fusce ligula sem, vehicula a sapien in, iaculis faucibus nulla. Nam faucibus feugiat ante, et ornare turpis aliquam vel. Donec non semper velit. Pellentesque vehicula enim lacinia, sagittis neque et, lobortis sapien. Quisque bibendum elementum nunc. Phasellus ac tincidunt tellus.</div>
        </section>
    </body>
 </html>

Комментарии:

1. Не указывайте атрибут height для div.content, и он будет работать

2. Да, не указывайте ему высоту: 100%; поскольку это не дает 100% ничего.

3. jsfiddle.net/AvSr9/6

4. Я думаю, что скрипт masonry, который я запустил (в рабочей версии), вызывает проблемы. Время для переосмысления! Спасибо за вашу помощь

Ответ №1:

Если вы хотите 100% высоты родительского элемента, все, что вам нужно, это : 

 div.content {
width:100%; /* or left:0; right:0; */
top: 0;
bottom: 0; /* same as height:100% */
position: absolute;
background: red;

}

Но если у вашего раздела нет никакой высоты, вы можете попробовать этот метод :

 section {
    display:table;
    width: 600px;
}
div.content {
    display:table-cell;
    background: red;
}

Ответ №2:

Вы не указываете высоту для section элемента. Итак, section элемент имеет height: 0 .

Так что в div.content height: 100% приведет к height: 0 .

Просто не включайте атрибут height в div.content CSS.

Попробуйте:

 div.content {
    width: 100%;
    top: 0;
    position: absolute;
    background: red;
}

ДЕМОНСТРАЦИЯ