блоки с height внутри min-height не растягиваются или wrapper не растягивается

@mefisto74 · Регистрация: 04.08.2013

Студворк — интернет-сервис помощи студентам

вот такой вот пример

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head> 
 <style type="text/css">
* {margin:0; padding:0;}
  html {height:100%; }
  body {height:100%; background:yellow;}
  #wrap {min-height:100%; height:100%; background:red;}
  #car { height:60%; width:100%; background:purple;}
  #text { height:40%; width:100% background:blue;}
  </style>
 
</head>
 
<body>
<div id="wrap"> 
<div id="car">
s
</div>
 
<div id="text">
s<br>s<br>
s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br> 
 
</div>
 
</body>
</html>

как сделать чтобы wrapper растягивался в соответствие с контентом, а не просто на 100% ? возможно ли без js? если невозможно, то подскажите как это реализовать, ну и соответсвенно лучше без него решение

@Divinesites · 04.08.2013, 19:51

У вас после

HTML5
1
<div id="wrap">

, нет закрывающего тега

HTML5
1
</div>

(Это ваша задумка, или вы проглядели?)
И можете по-конкретнее описать проблему? (не очень ясно, что значит "в соответствие с контентом")

@mefisto74 · 04.08.2013, 20:07 **[ТС]**

Проглядел, но к сожалению проблема не решилась.
мне нужно чтобы wrapper растягивался как min-height, он же просто как height 100% растягивается
в wrapper'е вложены два блока 60% и 40% высоты и именно в них контент.
car по моей задумке должен занимать 60% от wrapper (min-height:100%), а text 40%, но если в text больше чем 40% wrapper не растягивается на больше чем 100%, а останавливается на 100%
как сделать так, чтобы wrapper растягивался в соответствие с контентом который в него (в эти 2 блока) ?

@Ruisenor · 07.08.2013, 15:38

попробуйте для вашего врапера или поставить

CSS
1
height:auto;

или

CSS
1
overflow;hidden;

или вообще не указывайте высоту он по умолчанию должен растягиваться и еще один момент сделайте не 60 на 40 а 58 на 38 % например высоту входящих в него блоков .

@mefisto74 · 07.08.2013, 16:28 **[ТС]**

Ну указать height:auto насколько я помню все равно что вовсе не указывать (по крайней мере с блоками так)
если я не укажу height или укажу auto то, если контента в блоке text будет меньше чем 40% то wrapper растянется по этому контенту, а не на 100%, так что не катит, мне нужно чтобы и вовсе без контента от тянулся.
overflow:hidden ну спрячу я этот текст, что будет вылазить, вы думаете это выход?

@Ruisenor · 07.08.2013, 19:28

Сообщение от mefisto74

overflow:hidden ну спрячу я этот текст, что будет вылазить, вы думаете это выход?

сейчас не помню где здесь было решение по сходному вопросу и что overflow имеет особенности свои - если вы используете оверфлоу и без указания высоты то врапер охватывает автоматически все ваши дивы вложенные - попробуйте - просто не помню где это написано

@mefisto74 · 08.08.2013, 11:14 **[ТС]**

хмм интересный эффект, спасибо +1
но все равно это похоже не то, что мне нужно. та структура, которую я привел в самом начале не есть та, которая на практике конечно же. на самом деле там

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="wrapper">
<div id="header"> <!-- ну понятно что хедер height:20% от wrapper -->
<table>
<tr>
<td id="HeaderLeftSide"> <a href=""> <img src="logo.png" width="100%" height="100%" /> </a> </td> <!-- logo -->
<td id="HeaderRightSide">  
<span id="telnumber">8(351) 270 72 69 </span> <br>
г.Челябинск ул.пестеля 23
 </td>
</tr>
 
</table> 
</div>
<div id="left col"> <!-- левая колонка float:left height:79% , 79% потому что у футера box-shadow, ну не в этом суть моей проблемы -->
<div id="panel 1">
content
</div>
<div id="panel2">
content
</div>
</div>
 
<div id="content"> <!-- float:left height:100% -->
<div id="car"> &nbsp; </div> <!-- картинка height 60% -->
<div id="text"> content </div> <!-- здесь текст который должен занимать 40% от wrapper -->
</div>
<div id="footer">
<table>
<tr>
<td> content </td>
<td>content </td>
<td> picture </td> тут картинка бекграундом
</tr>
</table>
</div>

вроде правильно переписал.
так вот leftcol не растягивается на 100% от wrapper , а растягивается по контенту, мне же нужно 100%
а также #car не занимает 60%, она почему то сужается до непонятного значения, не понял вообще откуда оно взялось. а дальше текст вплоть до футера.

и еще один небольшой вопросец, если не сложно подскажите, как в таком вот резиновом шаблоне сделать отступ от футера снизу при такой резиновости? чтобы виднелся body всегда, даже при растягивании min-height

Добавлено через 2 часа 12 минут
нашел почти подходящее решение на хабре

CSS
1
2
3
4
5
6
7
8
.parent {
    min-height: 300px;
    height: 1px; /* Required to make the child 100% of the min-height */
}
 
.child {
    height: 100%;
}

но я бы хотел min-height в %, когда в пикселях вроде нормально, а в процентах уже косяк..

@Sabio · 10.08.2013, 18:25

Уберите height:100%; он там вообще не нужен

HTML5
1
2
3
4
5
6
7
8
<style type="text/css">
* {margin:0; padding:0;}
  html {height:100%; }
  body {height:100%; background:yellow;}
  #wrap {min-height:100%; height:100%; background:red;}
  #car { height:60%; width:100%; background:purple;}
  #text { height:40%; width:100% background:blue;}
  </style>

@ket4up · 10.08.2013, 19:15

...

Добавлено через 10 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head> 
 <style type="text/css">
   body {
    background-color:#666;
    padding:10px;
   }
   
   #wrap {
    width:1000px;
    height:auto;
    margin:0 auto;
    background-color:#ccc;
    border:1px solid #ccc;
   }
   
   #car {
    background-color:red;
    margin-bottom:5px;
   }
   
   #text {
    background-color:blue;
   }
  </style>
 
</head>
 
<body>
<div id="wrap"> 
<div id="car">
s
</div>
 
<div id="text">
s<br>s<br>
s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
 
 
</div>
 </div>
</body>

Добавлено через 17 минут
car 60% , text auto and wrap , потому что вам нужно растягивание текста в зависимости от количества контента , или нормально расскажите что вам надо

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html>
<head> 
 <style type="text/css">
   body {
    background-color:#666;
    padding:10px;
   }
   
   #wrap {
    width:1000px;
    height:auto;
    margin:0 auto;
    background-color:#ccc;
    border:1px solid #ccc;
   }
   
   #car {
    background-color:red;
    margin-bottom:5px;
    height:60%;
   }
   
   #text {
    background-color:blue;
    height:auto;
   }
 
 </style>
</head>
 
<body>
<div id="wrap"> 
<div id="car">
s
</div>
 
<div id="text">
s<br>s<br>
s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
s<br>s<br>
s<br>s<br>s<br>
s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>
  
</div>
 </div>
</body>
</html>

@mefisto74 · 13.08.2013, 10:16 **[ТС]**

А нельзя сделать, чтобы у text все таки было 40% от wrapper, а не height:auto?
ибо например когда добавляешь колонку и в ней больше контента намного, то не очень хорошо смотрится что text зависит от контента в нем.

@ket4up · 13.08.2013, 10:31

если вам нужен стабильный блок а в нем больше контента ,
используйте overflow-y:auto; ибо без прокрутки в стабильной высоте блока , не как.

Добавлено через 4 минуты
вы задаете стабильную высоту , от чего он будет больше? вы задаете 100% ( значит человек заходит видит блок на весь экран ) потом 40% ( он видит другой блок на 40% его экрана ) и 60% так же как и с 40% , как он должен становится больше? если контента больше в блоке с 40% , значит в нем уже не 40% а больше , а выходит что у wrap уже не 100% а больше.

@mefisto74 · 13.08.2013, 16:00 **[ТС]**

ну я хотел бы, чтобы блок с text всегда был растянут до конца, а не по контенту
допустим есть 60% car и в блоке text всего одна строчка, и в результате высота сайта будет 60% +1 строчка
а нужно 60% + min-height 40%. вариант с прокруткой конечно вообще не то

Добавлено через 26 минут
и еще с doctype car перестает тянутся на 60% О_о

@ket4up · 13.08.2013, 18:07

так чтоли

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head> 
 <style type="text/css">
   body {
    background-color:#666;
   }
   
   #wrap {
    width:1000px;
    height:auto;
    margin:0 auto;
    background-color:#ccc;
    border:1px solid #ccc;
   }
   
   #car {
    background-color:red;
    height:60%;
    margin-bottom:5px;
   }
   
   #text {
    background-color:blue;
    height:auto;
    min-height:40%;
   }
 
 </style>
</head>
 
<body>
<div id="wrap"> 
<div id="car">
s
</div>
 
<div id="text">
s<br>s<br>
 
  
</div>
 </div>
</body>
</html>

@mefisto74 · 13.08.2013, 19:55 **[ТС]**

ну без doctype вроде все нормально (и как я не додумался сам это добавить)
но с ним ничего не тянется :/

@ket4up · 13.08.2013, 23:02

display:block; в wrap

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
   body {
    background-color:#666;
   }
   
   #wrap {
    width:1000px;
    height:auto;
    margin:0 auto;
    background-color:#ccc;
    border:1px solid #ccc;
    display:block;
   }
   
   #car {
    background-color:red;
    height:60%;
    margin-bottom:5px;
   }
   
   #text {
    background-color:blue;
    height:auto;
    min-height:40%;
   }

Добавлено через 7 минут
поправка*

дело в том что #wrap должен иметь высоту в px , поставь ему 1000px например , и все заработает

Добавлено через 1 минуту
или поставь position:absolute;

@mefisto74 · 14.08.2013, 06:57 **[ТС]**

Насчет фиксированной высоты я думал, но я не одобряю это. это не универсальный способ. ну зайдет человек с разрешением ~400x~300 и оно у него на 100 км вперед растянется с пустыми блоками, не очень решение.
position:absolute чему? text и car? но тогда их ничего не будет обтекать и вручную что ли настраивать отступы? вообщем дальнейшее модернизирование того, что мы с вами сделали будет жутью какой то.. :/

@ket4up · 14.08.2013, 10:12

Сообщение от mefisto74

Насчет фиксированной высоты я думал, но я не одобряю это. это не универсальный способ. ну зайдет человек с разрешением ~400x~300 и оно у него на 100 км вперед растянется с пустыми блоками, не очень решение.
position:absolute чему? text и car? но тогда их ничего не будет обтекать и вручную что ли настраивать отступы? вообщем дальнейшее модернизирование того, что мы с вами сделали будет жутью какой то.. :/

врапу

CSS
1
 position:absolute;

, но абсолуте , портит дизайн , если не уметь им пользоваться.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
 
<html>
<head> 
 <style type="text/css">
   body {
    background-color:#666;
   }
   
   #wrap {
    width:1000px;
    height:100%;
    position:absolute;
    margin:0 auto;
    background-color:#ccc;
    border:1px solid #ccc;
 
   }
   
   #car {
    background-color:red;
    min-height:60%;
   }
   
   #text {
    background-color:blue;
    height:auto;
    min-height:40%;
 
   }
 
 </style>
</head>
 
<body>
<div id="wrap"> 
<div id="car">
s
</div>
 
<div id="text">
s<br>s<br>
 
  
</div>
 </div>
</body>
</html>
 
 
  
</body>
</html>

@mefisto74 · 14.08.2013, 13:50 **[ТС]**

нет, мне не нужно абсолютное позицирование, его дальше вообще невозможно редактировать, добавлять элементы вокруг него, внутри него с этим абсолютным позицированием...
есть еще способы ?

@ket4up · 14.08.2013, 14:19

других вариантов я не знаю.

Добавлено через 2 минуты
может через table по пробовать ...

Добавлено через 5 минут
или подойти к решение задачи со стороны js

Добавлено через 3 минуты
сделай 2-3 файла со стилями , для разных мониторов если хочешь всем сделать ....

@mefisto74 · 14.08.2013, 19:05 **[ТС]**

видимо выход тут в табличном варианте, ибо хотелось бы без js, а как таблицы стилей под разрешения делать я что то не понял, типа в одном width у враппера будет 1000 в другом 500 а в третьем 1500?
хорошо, тогда элементарнейший вопрос, но я не догоняю что можно сделать
вот у нас структура

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<tr>
<td> header </td> // 15%
</tr>
 
<tr>
<td> left col </td> //30%
<td> content </td>  //70%
</tr>
 
<tr>
<td> footer </td> //10%
 
 
</tr>

ну классическая с левым сайдбаром
так вот, почему header и footer сужаются до height auto когда в content начинается расширяться из-за контента переполняющего его?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@mefisto74 0 / 0 / 0 Регистрация: 04.08.2013 Сообщений: 44
	04.08.2013, 20:07 [ТС]
	Проглядел, но к сожалению проблема не решилась. мне нужно чтобы wrapper растягивался как min-height, он же просто как height 100% растягивается в wrapper'е вложены два блока 60% и 40% высоты и именно в них контент. car по моей задумке должен занимать 60% от wrapper (min-height:100%), а text 40%, но если в text больше чем 40% wrapper не растягивается на больше чем 100%, а останавливается на 100% как сделать так, чтобы wrapper растягивался в соответствие с контентом который в него (в эти 2 блока) ? 0

@mefisto74 0 / 0 / 0 Регистрация: 04.08.2013 Сообщений: 44
	07.08.2013, 16:28 [ТС]
	Ну указать height:auto насколько я помню все равно что вовсе не указывать (по крайней мере с блоками так) если я не укажу height или укажу auto то, если контента в блоке text будет меньше чем 40% то wrapper растянется по этому контенту, а не на 100%, так что не катит, мне нужно чтобы и вовсе без контента от тянулся. overflow:hidden ну спрячу я этот текст, что будет вылазить, вы думаете это выход? 0

@mefisto74 0 / 0 / 0 Регистрация: 04.08.2013 Сообщений: 44
	13.08.2013, 10:16 [ТС]
	А нельзя сделать, чтобы у text все таки было 40% от wrapper, а не height:auto? ибо например когда добавляешь колонку и в ней больше контента намного, то не очень хорошо смотрится что text зависит от контента в нем. 0

@ket4up 3 / 3 / 0 Регистрация: 01.02.2013 Сообщений: 23
	13.08.2013, 10:31
	если вам нужен стабильный блок а в нем больше контента , используйте overflow-y:auto; ибо без прокрутки в стабильной высоте блока , не как. Добавлено через 4 минуты вы задаете стабильную высоту , от чего он будет больше? вы задаете 100% ( значит человек заходит видит блок на весь экран ) потом 40% ( он видит другой блок на 40% его экрана ) и 60% так же как и с 40% , как он должен становится больше? если контента больше в блоке с 40% , значит в нем уже не 40% а больше , а выходит что у wrap уже не 100% а больше. 0

@mefisto74 0 / 0 / 0 Регистрация: 04.08.2013 Сообщений: 44
	13.08.2013, 16:00 [ТС]
	ну я хотел бы, чтобы блок с text всегда был растянут до конца, а не по контенту допустим есть 60% car и в блоке text всего одна строчка, и в результате высота сайта будет 60% +1 строчка а нужно 60% + min-height 40%. вариант с прокруткой конечно вообще не то Добавлено через 26 минут и еще с doctype car перестает тянутся на 60% О_о 0

@mefisto74 0 / 0 / 0 Регистрация: 04.08.2013 Сообщений: 44
	13.08.2013, 19:55 [ТС]
	ну без doctype вроде все нормально (и как я не додумался сам это добавить) но с ним ничего не тянется :/ 0

@mefisto74 0 / 0 / 0 Регистрация: 04.08.2013 Сообщений: 44
	14.08.2013, 06:57 [ТС]
	Насчет фиксированной высоты я думал, но я не одобряю это. это не универсальный способ. ну зайдет человек с разрешением ~400x~300 и оно у него на 100 км вперед растянется с пустыми блоками, не очень решение. position:absolute чему? text и car? но тогда их ничего не будет обтекать и вручную что ли настраивать отступы? вообщем дальнейшее модернизирование того, что мы с вами сделали будет жутью какой то.. :/ 0

@mefisto74 0 / 0 / 0 Регистрация: 04.08.2013 Сообщений: 44
	14.08.2013, 13:50 [ТС]
	нет, мне не нужно абсолютное позицирование, его дальше вообще невозможно редактировать, добавлять элементы вокруг него, внутри него с этим абсолютным позицированием... есть еще способы ? 0

@ket4up 3 / 3 / 0 Регистрация: 01.02.2013 Сообщений: 23
	14.08.2013, 14:19
	других вариантов я не знаю. Добавлено через 2 минуты может через table по пробовать ... Добавлено через 5 минут или подойти к решение задачи со стороны js Добавлено через 3 минуты сделай 2-3 файла со стилями , для разных мониторов если хочешь всем сделать .... 0