Форум PHP программистов > div не растягивается по высоте

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: div не растягивается по высоте

SmorodinKA

19.08.2013 - 08:34

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

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

#main {
  width: 510px;
}

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

user posted image

exotica

19.08.2013 - 08:55

DIV автоматически растягивается по содержимому. И сжимается соответственно. Попробуйте дать ему свойство:

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

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

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза

SmorodinKA

19.08.2013 - 09:00

exotica
А если они не в одном блоке?

exotica

19.08.2013 - 09:19

Цитата

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

Тогда может так оказаться что не от чего будет отталкиваться. И вы не добьетесь желаемого.
Я бы предложил так:

<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]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза

SmorodinKA

19.08.2013 - 09:25

Я их поместил в один 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>

exotica

19.08.2013 - 10:08

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

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

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза

YVSIK

19.08.2013 - 12:57

Цитата (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

innovate

19.08.2013 - 21:01

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;}

Быстрый ответ:

Здесь расположена полная версия этой страницы.