Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.52/25: Рейтинг темы: голосов - 25, средняя оценка - 4.52
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
1

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

04.08.2013, 18:58. Просмотров 5209. Ответов 19
Метки нет (Все метки)

вот такой вот пример
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? если невозможно, то подскажите как это реализовать, ну и соответсвенно лучше без него решение
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.08.2013, 18:58
Ответы с готовыми решениями:

Блок на растягивается на height:100%; min-height: 100%;
Подскажите пожалуйста, почему мне не получается растянуть блок во всю высоту браузера? Вроде бы...

Div блоки не растягиваются, height overlay не помогает
Здравствуйте, перечитал весь ваш форум на тематику растягивание DIV, но ничего не выходит. Я уже...

height внутри min-height
структура такова &lt;div id=&quot;wrapper&quot;&gt; # min-height 100% &lt;div id=&quot;block1&quot;&gt; height 60% width 30%...

max-height и min-height резиновый блок
есть див &lt;div class=&quot;main&quot;&gt;&lt;/div&gt; подключены стили .main{ border:1px solid #0C0;...

19
107 / 102 / 9
Регистрация: 29.06.2013
Сообщений: 367
04.08.2013, 19:51 2
У вас после
HTML5
1
<div id="wrap">
, нет закрывающего тега
HTML5
1
</div>
(Это ваша задумка, или вы проглядели?)
И можете по-конкретнее описать проблему? (не очень ясно, что значит "в соответствие с контентом")
0
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
04.08.2013, 20:07  [ТС] 3
Проглядел, но к сожалению проблема не решилась.
мне нужно чтобы wrapper растягивался как min-height, он же просто как height 100% растягивается
в wrapper'е вложены два блока 60% и 40% высоты и именно в них контент.
car по моей задумке должен занимать 60% от wrapper (min-height:100%), а text 40%, но если в text больше чем 40% wrapper не растягивается на больше чем 100%, а останавливается на 100%
как сделать так, чтобы wrapper растягивался в соответствие с контентом который в него (в эти 2 блока) ?
0
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
07.08.2013, 15:38 4
попробуйте для вашего врапера или поставить
CSS
1
height:auto;
или
CSS
1
overflow;hidden;
или вообще не указывайте высоту он по умолчанию должен растягиваться и еще один момент сделайте не 60 на 40 а 58 на 38 % например высоту входящих в него блоков .
0
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
07.08.2013, 16:28  [ТС] 5
Ну указать height:auto насколько я помню все равно что вовсе не указывать (по крайней мере с блоками так)
если я не укажу height или укажу auto то, если контента в блоке text будет меньше чем 40% то wrapper растянется по этому контенту, а не на 100%, так что не катит, мне нужно чтобы и вовсе без контента от тянулся.
overflow:hidden ну спрячу я этот текст, что будет вылазить, вы думаете это выход?
0
130 / 130 / 1
Регистрация: 29.05.2013
Сообщений: 612
07.08.2013, 19:28 6
Цитата Сообщение от mefisto74 Посмотреть сообщение
overflow:hidden ну спрячу я этот текст, что будет вылазить, вы думаете это выход?
сейчас не помню где здесь было решение по сходному вопросу и что overflow имеет особенности свои - если вы используете оверфлоу и без указания высоты то врапер охватывает автоматически все ваши дивы вложенные - попробуйте - просто не помню где это написано
1
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
08.08.2013, 11:14  [ТС] 7
хмм интересный эффект, спасибо +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 в %, когда в пикселях вроде нормально, а в процентах уже косяк..
0
57 / 57 / 14
Регистрация: 24.06.2013
Сообщений: 265
10.08.2013, 18:25 8
Уберите 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>
0
3 / 3 / 0
Регистрация: 01.02.2013
Сообщений: 23
10.08.2013, 19:15 9
...

Добавлено через 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>
0
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
13.08.2013, 10:16  [ТС] 10
А нельзя сделать, чтобы у text все таки было 40% от wrapper, а не height:auto?
ибо например когда добавляешь колонку и в ней больше контента намного, то не очень хорошо смотрится что text зависит от контента в нем.
0
3 / 3 / 0
Регистрация: 01.02.2013
Сообщений: 23
13.08.2013, 10:31 11
если вам нужен стабильный блок а в нем больше контента ,
используйте overflow-y:auto; ибо без прокрутки в стабильной высоте блока , не как.

Добавлено через 4 минуты
вы задаете стабильную высоту , от чего он будет больше? вы задаете 100% ( значит человек заходит видит блок на весь экран ) потом 40% ( он видит другой блок на 40% его экрана ) и 60% так же как и с 40% , как он должен становится больше? если контента больше в блоке с 40% , значит в нем уже не 40% а больше , а выходит что у wrap уже не 100% а больше.
0
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
13.08.2013, 16:00  [ТС] 12
ну я хотел бы, чтобы блок с text всегда был растянут до конца, а не по контенту
допустим есть 60% car и в блоке text всего одна строчка, и в результате высота сайта будет 60% +1 строчка
а нужно 60% + min-height 40%. вариант с прокруткой конечно вообще не то

Добавлено через 26 минут
и еще с doctype car перестает тянутся на 60% О_о
0
3 / 3 / 0
Регистрация: 01.02.2013
Сообщений: 23
13.08.2013, 18:07 13
так чтоли

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>
0
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
13.08.2013, 19:55  [ТС] 14
ну без doctype вроде все нормально (и как я не додумался сам это добавить)
но с ним ничего не тянется :/
0
3 / 3 / 0
Регистрация: 01.02.2013
Сообщений: 23
13.08.2013, 23:02 15
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;
0
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
14.08.2013, 06:57  [ТС] 16
Насчет фиксированной высоты я думал, но я не одобряю это. это не универсальный способ. ну зайдет человек с разрешением ~400x~300 и оно у него на 100 км вперед растянется с пустыми блоками, не очень решение.
position:absolute чему? text и car? но тогда их ничего не будет обтекать и вручную что ли настраивать отступы? вообщем дальнейшее модернизирование того, что мы с вами сделали будет жутью какой то.. :/
0
3 / 3 / 0
Регистрация: 01.02.2013
Сообщений: 23
14.08.2013, 10:12 17
Цитата Сообщение от 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>
0
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
14.08.2013, 13:50  [ТС] 18
нет, мне не нужно абсолютное позицирование, его дальше вообще невозможно редактировать, добавлять элементы вокруг него, внутри него с этим абсолютным позицированием...
есть еще способы ?
0
3 / 3 / 0
Регистрация: 01.02.2013
Сообщений: 23
14.08.2013, 14:19 19
других вариантов я не знаю.

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

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

Добавлено через 3 минуты
сделай 2-3 файла со стилями , для разных мониторов если хочешь всем сделать ....
0
0 / 0 / 0
Регистрация: 04.08.2013
Сообщений: 40
14.08.2013, 19:05  [ТС] 20
видимо выход тут в табличном варианте, ибо хотелось бы без 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 начинается расширяться из-за контента переполняющего его?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.08.2013, 19:05

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Аналог min-width, min-height в CSS < 3
Ребят. Собственно, нужно как-то сделать страницу с этими параметрами (т.е. не обязательно с ними) ...

Min-height у td
Не работает min-height у ячеек таблицы &lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;Round 1&lt;/td&gt;...

не срабатывает min-height
Здравствуйте. Есть блок, оборачивающий страницу. У него свойство height: 100%; min-height: 600px;....

Уменьшение min-height
Добрый день, у меня такой вопрос. Я сделал фиксированную менюшку, в ней два правых столбца...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.