DIV блоки с float: left; трабл с height

@Cheponya · Регистрация: 18.03.2014

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

Всем привет!
Есть 2 DIV'а завернутые в другой DIV.
Суть проблемы:
При пустом левом блоке правый отображается нормально на 100%, но стоит только хоть одну букву внести в левый блок, как правый тут же теряет height свой.

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="bob">
        <div class="news">
                            
        </div>
        <div class="r_side">
            <h1>Новости</h1>
            <p>Тута какойнить текст</p>
        
        </div>
    </div>

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
26
27
28
.bob{
    min-height: 100%;
    width: 100%;
    background-color: #eaeaea;
    display: table;
}
.news{
    min-height: 100%;
    width: 860px;
    margin: 3px auto;
    float: left;
}
/* Right 
-----------------------------------------------------------------------------*/
.r_side{
    height: 100%;
    min-height: 50px;
    width: 280px;
    float: left;
    margin-left: 10px;
    background-color: #f6f6f6;
    border: 2px solid #53669d;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0 0 15px #53669d;
    word-break: break-all;
    
}

У самого первого блока в котором все, стоит height: 100%; и display: block;

@andrey1994 · 21.06.2015, 10:16

А что вы хотите? Сделать так, чтобы они отображались в одном ряду?

Уменьшите ширину у левого блока.

@Cheponya · 21.06.2015, 10:31 **[ТС]**

Да, это две колонки рядом...ширины достаточно.

Добавлено через 4 минуты
Проблема решилась, был косяк в min-height....
Спасибо за ответ!!!

Проблема актуальна=) ничего не решилось(

@Cheponya · 21.06.2015, 10:40 **[ТС]**

В общем дела такие...

Если контент левого блока не превышает высоту высоту в 100% - правый блок отображается нормально на 100%, как только превышает - правый блок теряет height.

@andrey1994 · 21.06.2015, 10:50

min-height сделайте на 50px, а 400 к примеру.

@Cheponya · 21.06.2015, 10:53 **[ТС]**

Андрей, min-height там условно стоит в 50px ... выставлял когда в блоке еще текста не было...в том то и дело что мне ненужен фиксированный min-height иначе проблемы не было бы) нужен мин хейт в 100%...

@andrey1994 · 21.06.2015, 10:53

Уберите фиксированную ширину. У вас нормально отображается, у меня некрасиво уже(1366*728).

@Cheponya · 21.06.2015, 11:01 **[ТС]**

ширину чего?) у родителя width: 1200px; стоит, сколько не проверял за все время верстки самый оптимальный width.
Но вопрос не в этом заключается.........

@andrey1994 · 21.06.2015, 11:24

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
26
27
28
29
30
31
32
33
34
 <style>
        .bob{
            height: 100%;
            width: 100%;
            background-color: #eaeaea;
 
        }
        .news{
            height:100%;
            width: 860px;
            margin: 3px auto;
            float: left;
        }
        /* Right
        -----------------------------------------------------------------------------*/
        .r_side{
            width: 280px;
            float: right;
            margin-left: 10px;
            background-color: #f6f6f6;
            border: 2px solid #53669d;
            padding: 5px;
            border-radius: 15px;
            box-shadow: 0 0 15px #53669d;
            height: 100%;
            word-break: break-all;
            min-height: 100%;
        }
 
 
        body,html
        {
            height: 100%;
        }

@Cheponya · 21.06.2015, 12:25 **[ТС]**

Друг, я слабо понимаю чего ты мне хочешь по советовать) если можно по сути проблемы напиши....если можешь конечно

@Cheponya · 21.06.2015, 12:26 **[ТС]**

Почти получилось) поигрался с позиционированием....вот что вышло...можно выдать за фичу

@andrey1994 · 21.06.2015, 13:06

Cheponya, вставь эти стили и должно заработать)

@Cheponya · 21.06.2015, 13:09 **[ТС]**

нет) это не сработает) проверено еще вчера) способ нашелся уже, как я и написал....
хейт 98% сделал, отступ от подвала норм образовался, плюс реализовал скролл без полосы прокрутки)хорошая штука, а то скролл в див с бордер радиус печально вставляется)

спасибо! тему можно закрывать)

@andrey1994 · 21.06.2015, 13:22

Работает.

http://jsfiddle.net/andrey1994/739kevza/

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="bob">
        <div class="news">
                 fsggs           
        </div>
        <div class="r_side">
            <h1>Новости</h1>
            <p>Тута какойнить текст</p>
        
        </div>
    </div>

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
26
27
28
29
30
31
32
33
.bob{
            height: 100%;
            width: 100%;
            background-color: #eaeaea;
 
        }
        .news{
            height:100%;
            width: 70%;
            margin: 3px auto;
            float: left;
        }
        /* Right
        -----------------------------------------------------------------------------*/
        .r_side{
            width: 20%;
            float: right;
            margin-left: 10px;
            background-color: #f6f6f6;
            border: 2px solid #53669d;
            padding: 5px;
            border-radius: 15px;
            box-shadow: 0 0 15px #53669d;
            height: 100%;
            word-break: break-all;
            min-height: 100%;
        }
 
 
        body,html
        {
            height: 100%;
        }

@Cheponya · 21.06.2015, 13:38 **[ТС]**

Вот, что получилось) я же говорил что косяк при заполнении левого блока более чем на 100%.
Так, что сорри друг, это не получилось бы)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@andrey1994 42 / 42 / 19 Регистрация: 25.05.2015 Сообщений: 121
	21.06.2015, 10:16
	А что вы хотите? Сделать так, чтобы они отображались в одном ряду? Уменьшите ширину у левого блока. 1

@Cheponya 2 / 2 / 0 Регистрация: 18.03.2014 Сообщений: 148
	21.06.2015, 10:31 [ТС]
	Да, это две колонки рядом...ширины достаточно. Добавлено через 4 минуты Проблема решилась, был косяк в min-height.... Спасибо за ответ!!! Проблема актуальна=) ничего не решилось( 0

@Cheponya 2 / 2 / 0 Регистрация: 18.03.2014 Сообщений: 148
	21.06.2015, 10:40 [ТС]
	В общем дела такие... Если контент левого блока не превышает высоту высоту в 100% - правый блок отображается нормально на 100%, как только превышает - правый блок теряет height. Миниатюры 0

@andrey1994 42 / 42 / 19 Регистрация: 25.05.2015 Сообщений: 121
	21.06.2015, 10:50
	min-height сделайте на 50px, а 400 к примеру. 0

@Cheponya 2 / 2 / 0 Регистрация: 18.03.2014 Сообщений: 148
	21.06.2015, 10:53 [ТС]
	Андрей, min-height там условно стоит в 50px ... выставлял когда в блоке еще текста не было...в том то и дело что мне ненужен фиксированный min-height иначе проблемы не было бы) нужен мин хейт в 100%... 0

@andrey1994 42 / 42 / 19 Регистрация: 25.05.2015 Сообщений: 121
	21.06.2015, 10:53
	Уберите фиксированную ширину. У вас нормально отображается, у меня некрасиво уже(1366*728). 0

@Cheponya 2 / 2 / 0 Регистрация: 18.03.2014 Сообщений: 148
	21.06.2015, 11:01 [ТС]
	ширину чего?) у родителя width: 1200px; стоит, сколько не проверял за все время верстки самый оптимальный width. Но вопрос не в этом заключается......... 0

@Cheponya 2 / 2 / 0 Регистрация: 18.03.2014 Сообщений: 148
	21.06.2015, 12:25 [ТС]
	Друг, я слабо понимаю чего ты мне хочешь по советовать) если можно по сути проблемы напиши....если можешь конечно 0

@Cheponya 2 / 2 / 0 Регистрация: 18.03.2014 Сообщений: 148
	21.06.2015, 12:26 [ТС]
	Почти получилось) поигрался с позиционированием....вот что вышло...можно выдать за фичу Миниатюры 0

@andrey1994 42 / 42 / 19 Регистрация: 25.05.2015 Сообщений: 121
	21.06.2015, 13:06
	Cheponya, вставь эти стили и должно заработать) 0

@Cheponya 2 / 2 / 0 Регистрация: 18.03.2014 Сообщений: 148
	21.06.2015, 13:09 [ТС]
	нет) это не сработает) проверено еще вчера) способ нашелся уже, как я и написал.... хейт 98% сделал, отступ от подвала норм образовался, плюс реализовал скролл без полосы прокрутки)хорошая штука, а то скролл в див с бордер радиус печально вставляется) спасибо! тему можно закрывать) 1

@Cheponya 2 / 2 / 0 Регистрация: 18.03.2014 Сообщений: 148
	21.06.2015, 13:38 [ТС]
	Вот, что получилось) я же говорил что косяк при заполнении левого блока более чем на 100%. Так, что сорри друг, это не получилось бы) Миниатюры 1