Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.65/20: Рейтинг темы: голосов - 20, средняя оценка - 4.65
Farrewa
28 / 28 / 22
Регистрация: 27.12.2013
Сообщений: 368
#1

Как заставить div занять свободное место

14.05.2015, 19:32. Просмотров 3631. Ответов 9
Метки нет (Все метки)

Вообщем слегка глуповатый вопрос. Имеются 2 дива:
"L-div" и "R-div"
L-div занимает 300px, а R-div должен занять все остальное пространство. И вся эта конструкция должна выйти резиновой, ну т.к. мониторы у всех разные, то следственно R-div буден иметь разную ширину.

Вообщем помогите пожалуйста.

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

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.05.2015, 19:32
Ответы с готовыми решениями:

Как занять всю оставшуюся высоту в div'e?
Есть Div...Внутри него другие div'ы,они содержат тексту,формы и т.д....И...

Занять блоками пустое место
Привет всем! Вопрос вот в чём: как сделать так, чтобы блоки занимали пустое...

Как добиться эффекта, чтобы ссылки занимали свободное место ячейки равномерно?
как добиться эффекта чтобы ссылки занимали свобдоное место ячейки равномерно...

Как сделать, чтобы iframe занял всё оставшееся свободное место в ячейке таблицы?
Подскажите, как огромный iframe вложить в ячейку таблицы так, чтобы всё что...

Ширина картинки на все свободное место
Добрый день! Хочу разместить на странице картинку на весь экран, а справа...

9
whiteapps
408 / 373 / 220
Регистрация: 18.07.2014
Сообщений: 1,258
14.05.2015, 20:00 #2
Farrewa,

HTML5
1
2
<div id='left'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis vulputate nisi. Nullam pharetra elit sapien, ac aliquam augue lacinia ut. Proin massa erat, pretium id nisi non, rhoncus gravida lacus. Duis scelerisque volutpat leo, eu porta est tincidunt ut. Fusce sapien lacus, varius sit amet massa in, maximus malesuada magna. Donec mollis pretium consequat. Vestibulum imperdiet arcu ex, vitae ultrices est facilisis vel. Donec non tellus turpis. Fusce fringilla mauris ac velit tempus, ut hendrerit lorem molestie. Duis ante tortor, facilisis in faucibus a, elementum quis dolor. Morbi sodales convallis suscipit. Nulla gravida felis at nulla gravida, semper maximus massa interdum.</div>
<div id='right'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis vulputate nisi. Nullam pharetra elit sapien, ac aliquam augue lacinia ut. Proin massa erat, pretium id nisi non, rhoncus gravida lacus. Duis scelerisque volutpat leo, eu porta est tincidunt ut. Fusce sapien lacus, varius sit amet massa in, maximus malesuada magna. Donec mollis pretium consequat. Vestibulum imperdiet arcu ex, vitae ultrices est facilisis vel. Donec non tellus turpis. Fusce fringilla mauris ac velit tempus, ut hendrerit lorem molestie. Duis ante tortor, facilisis in faucibus a, elementum quis dolor. Morbi sodales convallis suscipit. Nulla gravida felis at nulla gravida, semper maximus massa interdum.</div>
CSS
1
2
3
4
5
6
7
8
9
#left {
    width: 300px;
    background: none green;
    float: left;
}
 
#right {
    background: none blue;
}
https://jsfiddle.net/4yh6abq7/
0
Farrewa
28 / 28 / 22
Регистрация: 27.12.2013
Сообщений: 368
14.05.2015, 20:07  [ТС] #3
дак, это текст растягивает блок на всю страницу. а без текста, его вообще не будет видно.
А мне надо что бы даже пустой блок было видно ( один фон)
0
whiteapps
408 / 373 / 220
Регистрация: 18.07.2014
Сообщений: 1,258
14.05.2015, 21:24 #4
Farrewa,
Цитата Сообщение от Farrewa Посмотреть сообщение
без текста, его вообще не будет видно.
укажите ему высоту, и можно без текста

Цитата Сообщение от Farrewa Посмотреть сообщение
дак, это текст растягивает блок на всю страницу
а как вы хотите?
0
Supernatural
604 / 203 / 48
Регистрация: 22.11.2010
Сообщений: 1,595
Записей в блоге: 1
14.05.2015, 21:33 #5
Если я правильно понял (как на рисунке), то тебе будет легче работать с тегом создания таблицы, ибо все теги строят страницу строго сверху-вниз, в случае с таблицей ты будешь иметь фиксированный результат.
0
Миниатюры
Как заставить div занять свободное место  
Supernatural
604 / 203 / 48
Регистрация: 22.11.2010
Сообщений: 1,595
Записей в блоге: 1
14.05.2015, 22:22 #6
хотя я придумал и второй вариант
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#main
{
    width:100%; 
}
#left {
    display: inline;
    width: 30%;
    height:100%;
    background: none green;
    float: left;
    height: document.height;
}
 
#right {
    background: none blue;
    width:70%;
}
https://jsfiddle.net/qv2akh33/
в 3ей строке кода можно вставить конкретное количество пикселей, но тогда начнутся проблемы с отображением с мониторами разного расширения.
0
Farrewa
28 / 28 / 22
Регистрация: 27.12.2013
Сообщений: 368
15.05.2015, 12:01  [ТС] #7
Цитата Сообщение от Supernatural Посмотреть сообщение
в 3ей строке кода можно вставить конкретное количество пикселей, но тогда начнутся проблемы с отображением с мониторами разного расширения.
В этом и есть проблема
Цитата Сообщение от whiteapps Посмотреть сообщение
а как вы хотите?
Хочу резиновый блок, не зависимый от содержания, растягивающийся от конца левого блока до правого края монитора.

Добавлено через 1 минуту
при том, поделить страницу в процентах между блоками нельзя.... левый блок строго 300пикселей в ширину
0
Supernatural
604 / 203 / 48
Регистрация: 22.11.2010
Сообщений: 1,595
Записей в блоге: 1
15.05.2015, 12:06 #8
Цитата Сообщение от Farrewa Посмотреть сообщение
при том, поделить страницу в процентах между блоками нельзя.... левый блок строго 300пикселей в ширину
весьма странная задача, тебе нужны точные значения левого поля, а размеры разрешения у мониторов разные, тебя это нисколько не смущает?
Если нет, то придержусь идеи с созданием таблицы с 2 колонками.
0
Farrewa
28 / 28 / 22
Регистрация: 27.12.2013
Сообщений: 368
15.05.2015, 17:43  [ТС] #9
Цитата Сообщение от Supernatural Посмотреть сообщение
а размеры разрешения у мониторов разные, тебя это нисколько не смущает?
я знаю что разные!!! в этом-то вся и проблема, стал бы я писать на форум тогда...
0
aj17
280 / 271 / 153
Регистрация: 02.06.2014
Сообщений: 1,015
15.05.2015, 17:50 #10
CSS
1
2
3
.one{width: 300px; height: 60px; float: left; border: 1px solid green;}
.two{overflow: hidden; height: 60px; border: 1px solid red;}
.two:after{content: ' '; display: block;} /*можно и без этого*/
HTML5
1
2
3
4
<div class="one"> фиксированная</div>
<div class="two">
    Резиновая часть
</div>
Не так?
2
15.05.2015, 17:50
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.05.2015, 17:50

Как заставить div растянуться
Добрый день! Не могу растянуть div элемент на всю высоту - прилагаю скрин что...

Div стремящийся заполнить свободное пространство по вертикали
Здравствуйте. Как сделать блок, который будет заполнять всё доступное...

Заставить картинки занимать пустое место
Здравствуйте , по сути это продолжение этой темы...


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

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

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