Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.03.2011, 17:10   #1
Arassir
Форумчанин
 
Аватар для Arassir
 
Регистрация: 23.10.2008
Сообщений: 230
По умолчанию как заставить родительский div растягиваться по высоте дочернего

как заставить родительский div растягиваться по высоте дочернего?

конструкция такая

Код:
<div id="div1">
<div id="div2"> Какой то текст
</div>
</div>
как сделать так чтобы в зависимости от содержимого(высоты) дочернего div'a высота родительского div'a тоже изменялась
Arassir вне форума Ответить с цитированием
Старый 11.03.2011, 17:41   #2
Wicort
Форумчанин
 
Аватар для Wicort
 
Регистрация: 04.08.2009
Сообщений: 684
По умолчанию

Если у Вас в стилях не задана высота, то он автоматом должен принимать высоту равную сумме высот содержимого.
Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =)
Мой ник зарегистрирован, а твой?
Wicort вне форума Ответить с цитированием
Старый 11.03.2011, 18:06   #3
Arassir
Форумчанин
 
Аватар для Arassir
 
Регистрация: 23.10.2008
Сообщений: 230
По умолчанию

Вот код
Код:
<style>
#div_main{
width:300px;
border: 1px solid red;
}

#div1{
float: left;
width:100px;
min-height:200px;
background: yellow;
}

#div2{
float: right;
width:200px;
min-height:200px;
background: green;
}
</style>
<div id="div_main">
<div id="div1">
</div>
<div id="div2">
</div>
</div>
Родительский div почему-то не растягивается
Arassir вне форума Ответить с цитированием
Старый 11.03.2011, 18:12   #4
Arassir
Форумчанин
 
Аватар для Arassir
 
Регистрация: 23.10.2008
Сообщений: 230
По умолчанию

Буквально сразу после того как написал сообщение, нашел решение.

Нужно после двух div'ов с свойством float вставить div со свойством clear

Например, такой:
Код:
<div style="clear:both;"></div>
Arassir вне форума Ответить с цитированием
Старый 14.03.2011, 11:55   #5
Wicort
Форумчанин
 
Аватар для Wicort
 
Регистрация: 04.08.2009
Сообщений: 684
По умолчанию

Видимо, это происходило из-за свойства float. Без него нормально работает.
Почему это происходит - не знаю. Моих познаний для понятия этого не достаточно.
Если кто знает, отпишитесь плз.
Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =)
Мой ник зарегистрирован, а твой?
Wicort вне форума Ответить с цитированием
Старый 14.03.2011, 15:53   #6
dekameron
Форумчанин
 
Аватар для dekameron
 
Регистрация: 27.04.2010
Сообщений: 185
По умолчанию

Цитата:
Сообщение от Wicort Посмотреть сообщение
Видимо, это происходило из-за свойства float. Без него нормально работает.
Почему это происходит - не знаю. Моих познаний для понятия этого не достаточно.
Если кто знает, отпишитесь плз.
Arassir ведь ответил

Код HTML:
<div id="div_main">
<div id="div1">
</div>
<div id="div2">
</div>
<div style="clear: both;"></div>
</div>
Помог - тырк на весы
dekameron вне форума Ответить с цитированием
Старый 15.03.2011, 08:38   #7
Wicort
Форумчанин
 
Аватар для Wicort
 
Регистрация: 04.08.2009
Сообщений: 684
По умолчанию

Я спросил не "как это исправить", а "почему это происходит". Заметьте, разные вопросы.
Еслия Вам помог, не поленитесь нажать на весы и оставить отзыв. Это не займет много времени, но даст понять, что я старался не зря =)
Мой ник зарегистрирован, а твой?
Wicort вне форума Ответить с цитированием
Старый 15.03.2011, 14:31   #8
JTG
я получил эту роль
Старожил
 
Аватар для JTG
 
Регистрация: 25.05.2007
Сообщений: 3,694
По умолчанию

Можно ещё сделать "самоочищающийся" контейнер через псевдокласс after

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div_main {
        width:300px;
        border: 2px solid red;
}

#div1 {
        float: left;
        width:100px;
        min-height:200px;
        height:200px;
        background: yellow;
}

#div2 {
        float: right;
        width:200px;
        height:200px;
        min-height:200px;
        background: green;
}

.clear:after {
        content: "&nbsp;";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
        line-height: 0;
}

/* для ослика */
* html .clear {
        height: 1%;
}
</style>
</head>

<body>
    <div id="div_main" class="clear">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</body>
</html>
пыщь
JTG вне форума Ответить с цитированием
Старый 16.10.2013, 14:15   #9
rysev-a
Новичок
Джуниор
 
Регистрация: 16.10.2013
Сообщений: 1
По умолчанию

Чтобы блок обрамлял все свои дочерние элементы (в том числе и плавающие), ему нужно назначить свойство overflow:hidden
rysev-a вне форума Ответить с цитированием
Старый 16.10.2013, 15:20   #10
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Wicort Посмотреть сообщение
Видимо, это происходило из-за свойства float. Без него нормально работает.
Почему это происходит - не знаю. Моих познаний для понятия этого не достаточно.
Если кто знает, отпишитесь плз.
Плавающие элементы вырываются из текущего потока и создают в родительском контексте между собой собственный. При этом для внешнего потока они не будут иметь размеров. Размеры будут влиять только на отображение строковых (ну и строчно-блочных элементов).
Любой строчный элемент (не плавающий) в том же блоке останется в предыдущем контексте и потоке, таким образом расширяя родителя по высоте. То же самое касается блочного элемента с clear:both/left/right, он отменяет для себя обтекание, таким образом падая под плавающие элементы и, находясь в прежнем контексте, также расширяет родителя.
overflow: hidden для родителя, без задания ему четких размеров будет пытаться всосать в себя все, что находится внутри (за исключением элементов, которые вообще вырваны из потока [вроде position:absolute/fixed] ). Однако достаточно любого незначительного изменения на странице (хоть css:hover в абсолютно другом месте), чтобы такой элемент начал пересчитывать свои размеры по-новой, что губительно сказывается на производительности.
display: inline-block для родителя (иначе говоря hasLayout), по-сути тоже самое что и вариант с overflow, только будет пересчитываться уже относительно соседей по потоку (так как находится в строковом потоке), что чуть быстрее оверфлоу, но все-же не то...

Так что лучше использовать обычный клеар-фикс через псевдо-элемент ::after (если не нужна поддержка ИЕ7 и ниже). Верстку не загадит и работает быстро
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить Handle дочернего окна? Z3rique Общие вопросы Delphi 8 11.02.2011 00:15
div тег как нижний слой для второго div тега dadli HTML и CSS 2 30.07.2010 01:12
Как отменить прозрачность div в прозрачном div zeharon HTML и CSS 0 24.07.2010 16:56
Delphi. Как записать, что родительский класс-перемещающийся отрезок? Kurai Помощь студентам 0 28.04.2010 21:23
Как подогнать содержимое ячейки по высоте ПУГВ HTML и CSS 4 28.03.2009 18:19