Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
TopoRYT
0 / 0 / 0
Регистрация: 29.11.2016
Сообщений: 23
1

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

11.01.2019, 22:20. Просмотров 1505. Ответов 2
Метки нет (Все метки)

Всем привет! Как реализовать изменение размеров блока при изменении размеров экрана? На сайте http://agar.io это реализовано так, что блок не может выйти за пределы размеров экрана. Буду рад готовым скриптам.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.01.2019, 22:20
Ответы с готовыми решениями:

Подгон страницы под размер окна (автоматический)
Здравствуйте начал делать сайт себе уже давно, но тут начал замечать особенность современных...

Движение блоков div
У меня такой вопрос: есть у меня три блока div,в каждом из которых изображение. стояла задача...

Сортировка по цене блоков div в js
Здравствуйте, помогите пожалуйста сделать сортировку по цене. Чтобы дивы отсортировались и...

Поиск на странице с отключением блоков div
Добрый день! Как реализовать поиск на странице с DIV, внутри есть h2. При поиске divы которые не...

JavaScript показа и скрытия нескольких блоков DIV
Доброго времени, помогите плизз решить проблему с javascript уже 3 день бьюсь, проблема в том что...

2
ПавелА2804
3 / 2 / 1
Регистрация: 29.08.2016
Сообщений: 71
26.01.2019, 12:22 2
Лучший ответ Сообщение было отмечено TopoRYT как решение

Решение

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

Добавлено через 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 минуты
И не забудь сказать спасибо)
1
8Observer8
2488 / 1593 / 273
Регистрация: 05.10.2013
Сообщений: 4,946
Записей в блоге: 72
26.01.2019, 23:41 3
Лучший ответ Сообщение было отмечено TopoRYT как решение

Решение

ПавелА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>
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.01.2019, 23:41

Одной строкой js изменить содержимое разных блоков div
Есть ли возможность одной строкой js изменить содержимое двух разных блоков div, типа:...

Как изменять последовательность блоков DIV мышью или кнопками управления
На странице есть несколько блоков div расположенных последовательно. Необходимо написать код, чтобы...

Как восстановить состояние div-блоков (visible/hidden) после submit формы?
Как восстановить состояние div-блоков (visible/hidden) после submit формы? Кто нибудь знает...


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

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

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