Как задать ширину блока div?

@Alhena · Регистрация: 05.03.2013

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

Как задать ширину блока див, чтоб она была равна 90% от общей ширины экрана - 320рх (ширина вертикального меню) - 10рх (чтоб был отступ от меню)?
Просто нужно, чтоб этот див был резиновым.

@Uc4o · 26.03.2013, 22:47

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

Как задать ширину блока див, чтоб она была равна 90% от общей ширины экрана - 320рх (ширина вертикального меню) - 10рх (чтоб был отступ от меню)?
Просто нужно, чтоб этот див был резиновым.

Так и задай ширину в процентах.

Donald28 · 27.03.2013, 01:26

такое умеет делать только html5/css3 - это называется "умный" CSS, т.е. размеры могут рассчитываться в css-стилях

Иначе нужно писать js-скрипты

@Alhena · 27.03.2013, 22:24 **[ТС]**

ну я же не могу написать в CSS так:

CSS
1
width: 90%-330px;

или все-таки могу?
Как тогда сделать?

Donald28 · 27.03.2013, 23:18

htmlbook.ru/blog/css-maket-stanovitsya-umnee-s-calc

@Alhena · 28.03.2013, 00:08 **[ТС]**

Donald28, одно НО. Такая фишка в Опере не прокатывает

Что с ней тогда делать? И префикс "-о" здесь не поможет...

Donald28 · 28.03.2013, 00:11

такая фишка не прокатывает не только в Опере.

Если нужно кроссбраузерное решение, то надо использовать JS скрипты

@Alhena · 28.03.2013, 00:16 **[ТС]**

Donald28, а в JS есть что-то на подобии calc()? Чтоб тоже над разными параметрами производить вычисления.

@KaRaNTiN · 29.03.2013, 12:50

Как вариант попробуйте так:

HTML5
1
2
3
4
5
6
<div id="all">
  <div id="menu">
  </div>
  <div id="content">
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
#all{
  width:90%;
}
#menu{
  width:320px;
  display: inline-block;
}
#content{
  position:relative;
  left: 10px;
  display: inline-block;
}

Как-то так. Работоспособность не проверял. У Вас есть один большой "див" шириной 90%. В нём вертикальное меню в 320пикселей, а второй "див" займёт всё остальное пространство.

@OT_VINTA · 30.03.2013, 00:00

HTML5
1
2
3
4
5
<div id="test" style="border:2px #000 solid;">содержание блока</div>
    <script type="text/javascript">
  var w = (window.innerWidth * 0.9) - 320;
      document.getElementById('test').style.width=w+"px";
    </script>

Обратите внимание! скрипт вставляем после дива

работоспособный пример http://learn.javascript.ru/play/gaJXRb

@Alhena · 02.04.2013, 13:14 **[ТС]**

KaRaNTiN, так вообще не работает.

OT_VINTA, если написать конкретное число (например, 320), то все и везде срабатывает. Но если написать так:

JavaScript
1
2
3
4
5
6
            var width_of_left_side = $('#left_side').width();
            var padding_of_main_content = $('#main_content').css("padding");
            padding_of_main_content = parseInt(padding_of_main_content);
            
            var width_of_main_content = (window.innerWidth * 0.9) - width_of_left_side - (4 * padding_of_main_content);
            document.getElementById('main_content').style.width = width_of_main_content + "px";

то в ФФ не срабатывает.
В чем ошибка?
------------
И в чем разница между

JavaScript
1
document.getElementById('main_content').style.width = width_of_main_content + "px";

и

JavaScript
1
$('#main_content').css("width", width_of_main_content + "px");

@Uc4o · 02.04.2013, 16:49

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

Как задать ширину блока див, чтоб она была равна 90% от общей ширины экрана - 320рх (ширина вертикального меню) - 10рх (чтоб был отступ от меню)?
Просто нужно, чтоб этот див был резиновым.

И я того же мнения.

@OT_VINTA · 02.04.2013, 19:23

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

В чем ошибка?

Я в javascript не силён, поэтому не знаю, но повозившись минут 10 вышло это

JavaScript
1
2
3
4
5
6
7
      var width_of_left_side = $('#left_side').width();
      alert(width_of_left_side);
      var padding_of_main_content = $('#main_content').css('padding');
      var padding_of_main_content_FF = document.getElementById("main_content").style.padding;
      padding_of_main_content = parseInt(padding_of_main_content_FF);
      var width_of_main_content = (window.innerWidth * 0.9) - width_of_left_side - (4 * padding_of_main_content);
      document.getElementById('main_content').style.width = width_of_main_content + "px";

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

И в чем разница

Особой разницы нет, но только ради этого подключать JQuery я бы не стал

Donald28 · 03.04.2013, 12:00

OT_VINTA, при этом 1 и 3 строка приведенного кода требует подключение jQuery))

@OT_VINTA · 03.04.2013, 17:52

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

OT_VINTA, при этом 1 и 3 строка приведенного кода требует подключение jQuery))

Это относилось к этому:

JavaScript
1
document.getElementById('main_content').style.width = width_of_main_content + "px";

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Alhena 1 / 1 / 0 Регистрация: 05.03.2013 Сообщений: 57

	Как задать ширину блока div? 26.03.2013, 16:18. Показов 14047. Ответов 14 Метки нет (Все метки) Как задать ширину блока див, чтоб она была равна 90% от общей ширины экрана - 320рх (ширина вертикального меню) - 10рх (чтоб был отступ от меню)? Просто нужно, чтоб этот див был резиновым. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	27.03.2013, 01:26
	такое умеет делать только html5/css3 - это называется "умный" CSS, т.е. размеры могут рассчитываться в css-стилях Иначе нужно писать js-скрипты 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	27.03.2013, 23:18
	htmlbook.ru/blog/css-maket-stanovitsya-umnee-s-calc 1

@Alhena 1 / 1 / 0 Регистрация: 05.03.2013 Сообщений: 57
	28.03.2013, 00:08 [ТС]
	Donald28, одно НО. Такая фишка в Опере не прокатывает Что с ней тогда делать? И префикс "-о" здесь не поможет... 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	28.03.2013, 00:11
	такая фишка не прокатывает не только в Опере. Если нужно кроссбраузерное решение, то надо использовать JS скрипты 0

@Alhena 1 / 1 / 0 Регистрация: 05.03.2013 Сообщений: 57
	28.03.2013, 00:16 [ТС]
	Donald28, а в JS есть что-то на подобии calc()? Чтоб тоже над разными параметрами производить вычисления. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	03.04.2013, 12:00
	OT_VINTA, при этом 1 и 3 строка приведенного кода требует подключение jQuery)) 0