Растягивание блока с контентом

@Lovrentiy · Регистрация: 07.09.2011

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

В общем в очередной раз затупил. делаю обертку из серии "контентврап" с градиентом, а фиксированный размер имеет только блок вложеный (контент) и посему не знаю как задать резиновую высоту для обертки

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="contentwrap_usbc">
        <div id="contentwrap_container_usbc" class="container_12">
        <div id="usbc_left" class="grid_<?php echo $leftcolgrid;?>">
            <jdoc:include type="modules"  name="left" />
            <jdoc:include type="modules"  name="banners_left" />
        </div>
        <div id="usbc_top" class="grid_<?php echo(10-$leftcolgrid);?>">
                                    <jdoc:include type="component" />
                                    <jdoc:include type="modules"  name="top" />
                                    <jdoc:include type="modules"  name="banners_top" />
        </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#contentwrap_usbc{
    width:100%;
    height:100%;
    min-height:100%;
    background: rgb(204,204,204); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(204,204,204,1) 0%, rgba(236,236,236,1) 30%, rgba(236,236,236,1) 70%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(204,204,204,1)), color-stop(30%,rgba(236,236,236,1)), color-stop(70%,rgba(236,236,236,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(204,204,204,1) 0%,rgba(236,236,236,1) 30%,rgba(236,236,236,1) 70%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(204,204,204,1) 0%,rgba(236,236,236,1) 30%,rgba(236,236,236,1) 70%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(204,204,204,1) 0%,rgba(236,236,236,1) 30%,rgba(236,236,236,1) 70%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(204,204,204,1) 0%,rgba(236,236,236,1) 30%,rgba(236,236,236,1) 70%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
 
}

@Ruisenor · 28.07.2013, 17:06

попробуйте

CSS
1
height: auto;

для обвертки поставить

@Forastero · 28.07.2013, 19:05

Здравствуй. Если я правильно понял, у тебя есть блоки с float внутри обертки.
В таком случае добавь ему свойство

CSS
1
overflow: hidden;

не указывая высоты.

@Lovrentiy · 02.08.2013, 20:20 **[ТС]**

способ с оверфлоу подошел идеально.
Но я не понял логику, ведь оверфлоу просто обрезает "область видимости", разве нет?

@Forastero · 02.08.2013, 20:26

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

Если размер блока не указан, то блок со свойством overflow просто будет "оборачивать", или как еще говорят - "натягиваться" на дочерние блоки.

Его часто применяют в качестве clearfix'а, когда нужно обернуть блоки с float-позицией.

@Lovrentiy · 02.08.2013, 20:34 **[ТС]**

Увы этот нбанс от меня ускользнул, а ведь это упрощает нюансы с обертыванием!

Правда у этого способа есть ряд минусов. Я так понимаю после такого преобразования размер обертки будет высотой с самый длинный блок либо с высотой совокупности всех дочерних блоков имеющих высоту, верно? Возможно ли "поднять" часть обёртки не трогая дочерние?
например дочерние блоки 500px, а мне нужно обертку уменшить сверху и снизу, сделав размер блока 480px уменьшив обертку на 10 px с двух сторон?....

@Forastero · 02.08.2013, 21:23

Lovrentiy, верно. Но ведь это уже фиксированный размер.

Но ведь даже если не использовать overflow, сделать размер блока меньшим, чем занимают его дети будет сложно.)

@Lovrentiy · 03.08.2013, 18:19 **[ТС]**

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

@Ruisenor · 03.08.2013, 19:00

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

сделать размер блока меньшим, чем занимают его дети будет сложно.)

с этим моментом согласен - может попробывать указать фиксированные размеры обвертки и убрать оверфлою и для дочерних блоков дате overflow:visible; - и тогда они дочерние блоки будут по идеи выходить наружу( но это теория практику не проверял) . Еще теоретически - может ошибаюсь - дочерний блоск попробывать наложить сверху .

@Hohenheim · 16.03.2014, 20:26

Наконец нашел решение аналогичной проблемы, перерыл весь гугл, а ответ был там, где и искать не вздумается

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование 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, то после закрытия окошка. . .

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	02.08.2013, 20:20 [ТС]
	способ с оверфлоу подошел идеально. Но я не понял логику, ведь оверфлоу просто обрезает "область видимости", разве нет? 0

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	02.08.2013, 20:26
	Lovrentiy, почти.) overflow: hidden скрывает все что происходит вне блока, но только если размер блока указан явно. Если размер блока не указан, то блок со свойством overflow просто будет "оборачивать", или как еще говорят - "натягиваться" на дочерние блоки. Его часто применяют в качестве clearfix'а, когда нужно обернуть блоки с float-позицией. 2

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	02.08.2013, 20:34 [ТС]
	Увы этот нбанс от меня ускользнул, а ведь это упрощает нюансы с обертыванием! Правда у этого способа есть ряд минусов. Я так понимаю после такого преобразования размер обертки будет высотой с самый длинный блок либо с высотой совокупности всех дочерних блоков имеющих высоту, верно? Возможно ли "поднять" часть обёртки не трогая дочерние? например дочерние блоки 500px, а мне нужно обертку уменшить сверху и снизу, сделав размер блока 480px уменьшив обертку на 10 px с двух сторон?.... 0

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	02.08.2013, 21:23
	Lovrentiy, верно. Но ведь это уже фиксированный размер. Но ведь даже если не использовать overflow, сделать размер блока меньшим, чем занимают его дети будет сложно.) 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	03.08.2013, 18:19 [ТС]
	Я просто думаю, как это реализовать, в принципе это делается обычно не вложенным а соседним блоком, но тогда как учитывать размер интересующей обертки? 0

@Hohenheim 4 / 4 / 4 Регистрация: 20.05.2013 Сообщений: 23
	16.03.2014, 20:26
	Наконец нашел решение аналогичной проблемы, перерыл весь гугл, а ответ был там, где и искать не вздумается 0