Как переделать сайт с фиксированными размерами в сайт резиновый?

@phpk · Регистрация: 15.05.2013

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

Хочу переделать сайт с фиксированными размерами в сайт резиновый.
А именно меня интересует пересчёт margin и padding у внутренних блоков!
Имеется размер внешнего блока wrapper -1035px. Допустим я назначаю ему новую макс-ю ширину:

CSS
1
2
max-width: 1200px;
width: 100%

Есть ещё блок content (width - 810px) и блок aside (width - 220px).
Если в блоке content паддинг - 10px, то как нужно правильно перевести его в проценты, только чтобы размер относительно wrapper оставался такой-же! Ведь новый размер article - 78,26% (939,13px).
Подскажите формулу, по которой нужно расчитывать новый размер отступов для внутренних блоков

Добавлено через 3 часа 7 минут
???

@GalaX · 03.03.2015, 22:24

Формулы тут не причем

Пример:

CSS
1
2
3
4
5
6
7
8
9
10
11
.left {
  float:left;
  width:200px;
}
.right {
  float:right;
  width:200px;
}
.center {
  margin:0 250px;
}

HTML5
1
2
3
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

получается резина

Добавлено через 41 секунду
зависит как у тебя там сверстано - может все переделывать надо

Добавлено через 1 минуту

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

Если в блоке content паддинг - 10px, то как нужно правильно перевести его в проценты

Этого не нужно делать - просто надо структуру нормально построить.

@phpk · 03.03.2015, 23:09 **[ТС]**

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

получается резина

не согласен! Боковые блоки фиксированы.
Или я чего-то недопонимаю?!

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

зависит как у тебя там сверстано - может все переделывать надо

так я и переделываю. Был размер 1035, а я хочу 1200. Теперь 1200px базовый размер, которому должны соответствовать все прежние размеры, только в процентах!

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

Этого не нужно делать - просто надо структуру нормально построить.

что вы имеете ввиду под "структуру нормально построить"?
И почему не стоит так делать?

@Fedor92 · 03.03.2015, 23:11

phpk, а что тут сложного? Возьмём Ваш блок wrapper-1035px, в него вложен блок content - 810px, тогда решаем незамысловатое уравнение:

1035px - 100%
810px - x
x=810*100/1035

Если отступ допустим margin-left:20px, тогда, чтобы перевести его в резину уравнение примет вид:

1035px - 100%
20px - x
x=20*100/1035

Думаю принцип ясен... А самое главное важно усвоить, что сумма отступов слева и справа + ширина блоков = 100% ширины родительского блока... Сумма отступов снизу и сверху + высота блоков = 100% высоты родительского блока... И нужно понимать по отношению к какому блоку считаете резину для блоков и для отступов...

@phpk · 03.03.2015, 23:36 **[ТС]**

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

x=20*100/1035

эту формулу я знал. Но если padding 20px был прежний размер с шириной wrapper - 1035px, в новой ширине 1200px padding будет уже больше. Как я говорил, мне не просто нужно перевести пикселы в проценты! Мне нужно перевести в проценты, основываясь на новой ширине 1200px с сохранением всех прежних отношений (пропорций) к ширине.
Возьмём 810*1200/1035 получается новая ширина content - 939,13px, но ведь будут и новые отступы!
Обьясните пожалуйста, потому-что я только недавно начал заниматься адаптацией сайтовю
И как на счёт отступов по высоте? Если изменилась ширина 1200px, то как высчитывать допустим padding-top ?

@Fedor92 · 04.03.2015, 02:26

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

Но если padding 20px был прежний размер с шириной wrapper - 1035px, в новой ширине 1200px padding будет уже больше

Тогда нужно знать какой будет величина отступа в новой вёрстке - здесь уже всё в Ваших руках - насколько Вы измените старый отступ... Для подобных ситуаций индивидуальной формулы не существует, поскольку изначально неизвестно насколько Вы увеличите отступ(в 2 раза, а может в 3, а может в 1.5)...

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	03.03.2015, 23:11
	phpk, а что тут сложного? Возьмём Ваш блок wrapper-1035px, в него вложен блок content - 810px, тогда решаем незамысловатое уравнение: 1035px - 100% 810px - x x=810100/1035 Если отступ допустим margin-left:20px, тогда, чтобы перевести его в резину уравнение примет вид: 1035px - 100% 20px - x x=20100/1035 Думаю принцип ясен... А самое главное важно усвоить, что сумма отступов слева и справа + ширина блоков = 100% ширины родительского блока... Сумма отступов снизу и сверху + высота блоков = 100% высоты родительского блока... И нужно понимать по отношению к какому блоку считаете резину для блоков и для отступов... 1