Как сделать конструкцию кроссбраузерной?

@Nebiros · Регистрация: 23.03.2010

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

Подскажите как сделать следующую конструкцию кроссбраузерной
шапка 50px, левый бар 250px, контент остальное пространство, футер 20px, и вся эта конструкцию вмешалась в рамки экрана, а если не помещалось в контенте то прокрутка была именно в нем, подскажите как?

Дело в том что как не крутил то не получается то получается но в разных браузерах по разному отображается...

@Андрюшатина · 31.10.2017, 20:39

А давайте вы выложите ваши лучшие наработки, а я подскажу как подправить))) нет желания всё писать за вас с нуля

Qwerty_Wasd · 31.10.2017, 20:42

Nebiros,

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

но в разных браузерах по разному отображается

при таких условиях

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

шапка 50px, левый бар 250px, контент остальное пространство, футер 20px

еще и вид на мобильных девайсах будет сильно разниться от десктопных. К примеру, следую вашим условиям:

HTML5
1
2
3
4
5
6
<div class="header">Шапка</div>
<div class="main">
  <div class="aside">Левый бар</div>
  <div class="content">Контент</div>
</div>
<div class="footer">Подвал</div>

CSS
1
2
3
4
5
6
body{height:100vh;width:100vw;}
.header{width:100%;height:50px;background:rgb(182, 199, 105);}
.main{display:table;width:100%;height:calc(100% - 70px);background:black;}
.aside{display:table-cell;width:250px;height:100%;background:rgb(76, 194, 139);}
.content{display:table-cell;width:calc(100% - 250px);height:100%;background:rgb(194, 107, 150);}
.footer{height:20px;width:100%;background:rgb(84, 145, 176);}

Обратите внимание на скрины, на мобильном левый бар с фиксированной шириной 250px оставит от 320px экрана всего ничего. Это можно вылечить медиа запросами с соответствующими стилями.

Как сделать конструкцию кроссбраузерной?

Либо оттталкивайтесь от относительных размеров, и тогда с мобильных вид будет адекватным:

CSS
1
2
3
4
5
6
body{height:100vh;width:100vw;}
.header{width:100%;height:10%;background:rgb(182, 199, 105);}
.main{display:table;width:100%;height:85%;background:black;}
.aside{display:table-cell;width:20%;height:100%;background:rgb(76, 194, 139);}
.content{display:table-cell;width:80%;height:100%;background:rgb(194, 107, 150);}
.footer{height:5%;width:100%;background:rgb(84, 145, 176);}

@Nebiros · 02.11.2017, 11:25 **[ТС]**

Долго не мог понять что же я дел не так, вроде и делал как здесь показано, оказывается ошибка была в css calc, я писал в коде так width:calc(100%-250px); (без пробелов в вычислениях, привычка такая) именно из-за этого и не работало, добавил пробелы width:calc(100% - 250px); и так работает, а я все ломал голову почему у меня этот calc не работает...

Новые блоги и статьи Все статьи Все блоги /
Загрузка 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 , при. . .

@Nebiros 41 / 40 / 16 Регистрация: 23.03.2010 Сообщений: 3,122

	Как сделать конструкцию кроссбраузерной? 31.10.2017, 18:37. Показов 1070. Ответов 3 Метки нет (Все метки) Подскажите как сделать следующую конструкцию кроссбраузерной шапка 50px, левый бар 250px, контент остальное пространство, футер 20px, и вся эта конструкцию вмешалась в рамки экрана, а если не помещалось в контенте то прокрутка была именно в нем, подскажите как? Дело в том что как не крутил то не получается то получается но в разных браузерах по разному отображается... 0

@Андрюшатина 80 / 59 / 47 Регистрация: 27.11.2014 Сообщений: 359
	31.10.2017, 20:39
	А давайте вы выложите ваши лучшие наработки, а я подскажу как подправить))) нет желания всё писать за вас с нуля 0

@Nebiros 41 / 40 / 16 Регистрация: 23.03.2010 Сообщений: 3,122
	02.11.2017, 11:25 [ТС]
	Долго не мог понять что же я дел не так, вроде и делал как здесь показано, оказывается ошибка была в css calc, я писал в коде так width:calc(100%-250px); (без пробелов в вычислениях, привычка такая) именно из-за этого и не работало, добавил пробелы width:calc(100% - 250px); и так работает, а я все ломал голову почему у меня этот calc не работает... 0

Как сделать конструкцию кроссбраузерной?

Решение