Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> div не растягивается по высоте
SmorodinKA  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Абориген
*****

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 225
Пользователь №: 37966
На форуме: 3 года, 3 месяца, 22 дня
Карма:




Есть у меня два дива:

#news {
width: 250px;
float: left;
}

#main {
width: 510px;
}


Когда div main становится по высоте больше div news, то получается, что второй не растягивается, как пока на картинке. Что такое?

user posted image
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
exotica  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Code noobing... :))
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 732
Пользователь №: 36599
На форуме: 3 года, 9 месяцев, 16 дней
Карма: 22

Не курю:
3 года, 9 месяцев, 5 дней


DIV автоматически растягивается по содержимому. И сжимается соответственно. Попробуйте дать ему свойство:
#news {
width: 250px;
height: 100%
float: left;
}

Тогда он будет занимать 100% высоты от имеющейся высоты main при условии что и main И news помещены в одном блоке, либо news помещен в main


--------------------
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
SmorodinKA  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Абориген
*****

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 225
Пользователь №: 37966
На форуме: 3 года, 3 месяца, 22 дня
Карма:




exotica
А если они не в одном блоке?
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
exotica  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Code noobing... :))
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 732
Пользователь №: 36599
На форуме: 3 года, 9 месяцев, 16 дней
Карма: 22

Не курю:
3 года, 9 месяцев, 5 дней


Цитата
А если они не в одном блоке?

Тогда может так оказаться что не от чего будет отталкиваться. И вы не добьетесь желаемого.
Я бы предложил так:
<body>
<div
id="main">
<div
id="news">Новостной блок</div>
<div
id="map">Блок с картой</div>
</div>
</body>


А CSS такое:
#main {
width: 760px;
height: (если требуется зафиксировать высоту, если нет то высота блока будет ровняться высоте блока внутри него)
}

#news {
width: 250px;
height: 100%;
float: left;
}
#map {
width: 510px;
}


--------------------
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
SmorodinKA  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Абориген
*****

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 225
Пользователь №: 37966
На форуме: 3 года, 3 месяца, 22 дня
Карма:




Я их поместил в один div, но ничего не изменилось, может, я что-то в стилях накосячил, у меня там три колонки. Вот их стили:

#container {
width: 1000px;
}

#uslugi {
width: 200px;
height: 100%;
float: right;
padding-top: 20px;
}

#main {
width: 510px;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
text-align: justify;
float: left;
margin-bottom: 10px;
}

#news {
width: 250px;
height: 100%;
background-color: #f0f1f3;
float: left;
}


А вот сама структура:

<div id="container">
<
div id="news"></div>
<
div id="main"></div>
<
div id="uslugi"></div>
</
div>
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
exotica  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Code noobing... :))
******

Профиль
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 732
Пользователь №: 36599
На форуме: 3 года, 9 месяцев, 16 дней
Карма: 22

Не курю:
3 года, 9 месяцев, 5 дней


чтото тут не все css помоему. Судя по картинке выше, есть отступы от краев блока, где они в css

Попробуйте глянуть в макетах htmlbook: http://htmlbook.ru/layout


--------------------
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
YVSIK  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



★___★mvccmv.ru★___★
******

Профиль
Журнал
Группа: Форумчанин
Завсегдатай форума
Сообщений: 3935
Пользователь №: 25563
На форуме: 5 лет, 11 месяцев, 5 дней
Карма: 63

Трезвый :
45 лет, 9 месяцев, 2 дня


Цитата (SmorodinKA @ 19.08.2013 - 08:34)
Когда div main становится по высоте больше div news, то получается, что второй не растягивается, как пока на картинке. Что такое?

хм интересный вариант есть
укладываем твою картинку в DIV без стилей css
внутри выглядеть будет так
<img src="(тут ссылка на скин/картинку/)" width="465" height="209" />

width="ставим тут" height="и тут"
надобные размерчики , и что хошь растянется и подгониться ;)
дальше поиграться все сам увидишь как сработает
кстати можно и динамически туда что то подцеплять и размер и проценты
width="<?php ....>" 
:D


--------------------
«Гнусное свойство карликовых умов приписывать
________________!свое духовное убожество другим!»
___
О) как-же он прав=>__________________ © Оноре де Бальзак.

отличный хост(рекомендую !! )
My MVC-CMV
PMПисьмо на e-mail пользователюСайт пользователяICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
innovate  
[x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 287
Пользователь №: 35024
На форуме: 4 года, 3 месяца, 2 дня
Карма: 7




exotica, это работать не будет.
SmorodinKA, первые 4 варианта (по адекватности):

I. Создаешь таблицу:
<table>
<tr>
<td
id="news"></td>
<td
id="main"></td>
</tr>
</table>

table {width: 760px;}
#news {width: 250px;}

II. Имитируешь таблицу:
#container {display: table; width: 760px;}
#news, #main {display: table-cell;}
#news {width: 250px;}

Структура для II-го и VI-го вариантов.
<div id="container">
<div
id="news"></div>
<div
id="main"></div>
</div>

III. js-ом задаешь высоту #news по высоте #main.
IV. margin padding overflow:
#container {overflow: hidden; width: 760px;}
#news, #main {margin: 0 0 -99000px; padding: 0 0 99000px 0; float: left;}
#news {width: 250px;}
#main {width: 510px;}
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Rasty  
[x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 22
Пользователь №: 23571
На форуме: 6 лет, 3 месяца, 14 дней
Карма:




Добрый день! Не хотел создавать новую тему прошу прощения у ТС за внедрение.

Суть. Есть див, выводится в цикле, вот код CSS

.box_catalog2 {
width:230px;
height:350px;
background: #00F;
margin:5px 5px 5px 5px;
float:left;
}
.box_catalog2:hover {
width:230px;
height:500px;
background: #F00;
margin:5px 5px 5px 5px;
position:relative;
z-index:10 !important;
}

Почему, почему, почему же все-таки hover изменяет c легкостью Background и height но никак не ставит див выше остальных по Z оси? Почему див не стает выше всех а сдвигает нижние дивы? Помогите 2 дня уже ушло на эту хрень. Перепробовал разные варианты css указывал минус z-index позиционирование различное в общем перечитал перепробовал всякого но так правильно и не сделал. Дивы эти являются детьми еще одного дива который лежит еще в одном. Эти два родителя никак не позиционированы. вот их кода

#content {
overflow:hidden;
height: auto;
padding:10px;
}
#container {
width:1024px;
margin:0 auto;
margin-top:20px;
margin-bottom:20px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.3); /* For Firefox */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3); /* For Safari и Chrome */
box-shadow: 0 0 10px rgba(0,0,0,0.3); /* Shadow settings */
background: #FFF;
}

В идеале див при hover должен менять свою высоту не нарушая общий строй (быть поверх остальных) Подскажите где ошибка, или может на Квери есть такое решение. Спасибо заранее!!

Это сообщение отредактировал Rasty - 4.09.2013 - 18:43
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Ы  
Дата
Цитировать сообщение


Гость пожелал остаться неизвестным

Unregistered









может быть потому что свойство zIndex не работает для relativ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса