Подгон размеров div блоков под экран

@TopoRYT · Регистрация: 29.11.2016

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

Всем привет! Как реализовать изменение размеров блока при изменении размеров экрана? На сайте http://agar.io это реализовано так, что блок не может выйти за пределы размеров экрана. Буду рад готовым скриптам.

@ПавелА2804 · 26.01.2019, 12:22

И не надо подгонять до нуля. У любого блока должен быть минимальный размер)

Добавлено через 14 секунд

JavaScript
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
<!DOCTYPE html>
 
<html>
 
<head>
    <title>KOTELOK</title>
    <meta charset="UTF-8">
</head>
<style type="text/css">
    .main{
        min-width: 100px;
        width: 70%;
        border-width: 5px;
        border-style: outset;
        border-color: black;
        margin: 0 auto;
        min-height: 500px
    }
</style>
 
<body class="main">
    Text...
</body>
 
</html>

Добавлено через 45 секунд
Автоподгон - width в процентах, min-width - минимальная ширина.

Добавлено через 2 минуты
И не забудь сказать спасибо)

@8Observer8 · 26.01.2019, 23:41

ПавелА2804, <style> tag must be in the tag <head>

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

На сайте http://agar.io это реализовано так, что блок не может выйти за пределы размеров экрана.

<canvas> isn't inside of <div> in Agar.io. If you need canvas on whole window you can inspect canvas element in Agar.io and you will see this style:

CSS
1
2
3
4
5
6
7
8
9
canvas {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

Playground

PHP/HTML
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
<!DOCTYPE html>
<html>
 
<head>
    <title>Canvas like in Agar.io (on whole window)</title>
    <style>
        canvas {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas" width="200" height="200"></canvas>
 
    <script>
        var gl = document.getElementById("renderCanvas").getContext("webgl");
        gl.clearColor(0.5, 0.5, 0.5, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
    </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Подгон размеров div блоков под экран

Решение

Решение

@TopoRYT 0 / 0 / 0 Регистрация: 29.11.2016 Сообщений: 23

	Подгон размеров div блоков под экран 11.01.2019, 22:20. Показов 3001. Ответов 2 Метки нет (Все метки) Всем привет! Как реализовать изменение размеров блока при изменении размеров экрана? На сайте http://agar.io это реализовано так, что блок не может выйти за пределы размеров экрана. Буду рад готовым скриптам. 0