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

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

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

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

HTML5

<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

</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

<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

.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

<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

<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

<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

<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

 
   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

<!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

<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 начинается расширяться из-за контента переполняющего его?

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@mefisto74 0 / 0 / 0 Регистрация: 04.08.2013 Сообщений: 43
	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

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

@Ruisenor 130 / 130 / 1 Регистрация: 29.05.2013 Сообщений: 612
	07.08.2013, 19:28	6
	Сообщение от mefisto74 overflow:hidden ну спрячу я этот текст, что будет вылазить, вы думаете это выход? сейчас не помню где здесь было решение по сходному вопросу и что overflow имеет особенности свои - если вы используете оверфлоу и без указания высоты то врапер охватывает автоматически все ваши дивы вложенные - попробуйте - просто не помню где это написано 1

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

@ket4up 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

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

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

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

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

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