Как корректно развернуть div на всё окно браузера?

@useruser · Регистрация: 29.06.2015

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

CSS

body 
{
padding: 0;
margin:0px;
font-family: Arial;
font-size: 12px;
}

HTML5

<script> 
<head>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="jquery.min.js"></script>
$(document).ready(function(){
$("#resize_container").click(function(){
var window_width=$(window).width();
var window_height=$(window).height();
$("#container").animate({
width:window_width,
height:window_height
});
});
});
</script>
 
</head>
<body>
<div id="container" style="height: 400px; margin: 0 auto; border: 1px solid black;">
<a href="#" id="resize_container">На весь экран</a>
</div>

Тестировал в IE Firefox Chrome.

Данный код разворачивает div на всё окно браузера. Но div немного не влезает. Он чуть-чуть больше. Вне зависимости открыл ли я окно браузера на весь экран, половину экрана и т.д.
Появляются горизонтальные и вертикальные линейки прокрутки. div становится больше чем надо, приблизительно на 20px.
Как корректно развернуть div на всё окно браузера?

@Lazy_Den · 18.12.2017, 20:55

Результат в песочнице

CSS

#container {
    height: 400px;
    box-sizing: border-box;
    border: 1px solid black;
}

Javascript

$(function() {
    $("#resize_container").click(function() {
        $("#container").animate({
            width: '100vw',
            height: '100vh'
        });
    });
});

@useruser · 18.12.2017, 21:08 **[ТС]**

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

CSS

Да это понятно, потом всё вынесу в ксс.

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

width: '100vw',
height: '100vh'

И так тоже самое. линейки прокрутки.

Добавлено через 8 минут
Причем что ваш, что мой код при первом нажатии на ссылку дает линейки прокрутки.
А при втором заново изменяет размеры дива делая его почти на весь экран, с отступами слева, справа, снизу но не сверху... Непонятно.

Мой код
https://jsfiddle.net/bnstr4qt/

Ваш код
https://jsfiddle.net/80kzmoz4/

@Lazy_Den · 18.12.2017, 21:27

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

Ваш код

Это не мой код, а ваш. Играем в игру "Найдите отличия"

@Qwerty_Wasd · 18.12.2017, 21:31

useruser, вот работающий пример. К нему подключен только normalize.css. - Песочница

HTML5

<div id="container" style="height:100px;width:100px; margin: 0 auto;border:2px solid black;box-sizing:border-box;background:#BCAAA4;transition:2s;"><a href="#" id="resize_container" onclick="resize();">Fullscreen</a></div>

Javascript

function resize(){if((container.style.height!="100vh") && (container.style.width!="100vw")) {container.style.height="100vh";container.style.width="100vw";} else {container.style.height="100px";container.style.width="100px";}}

Добавлено через 3 минуты
useruser, Кстати да, Lazy_Den предложил вам абсолютно рабочий вариант. Чего не воспользовались?

@useruser · 18.12.2017, 21:32 **[ТС]**

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

Это не мой код, а ваш. Играем в игру "Найдите отличия"

Спасибо работает.
Трудно играть в эту игру в 12 ночи.

@useruser 165 / 89 / 38 Регистрация: 29.06.2015 Сообщений: 1,098
	18.12.2017, 21:08 [ТС]	3
	Сообщение от Lazy_Den CSS Да это понятно, потом всё вынесу в ксс. Сообщение от Lazy_Den width: '100vw', height: '100vh' И так тоже самое. линейки прокрутки. Добавлено через 8 минут Причем что ваш, что мой код при первом нажатии на ссылку дает линейки прокрутки. А при втором заново изменяет размеры дива делая его почти на весь экран, с отступами слева, справа, снизу но не сверху... Непонятно. Мой код https://jsfiddle.net/bnstr4qt/ Ваш код https://jsfiddle.net/80kzmoz4/ 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	18.12.2017, 21:27	4
	Сообщение было отмечено useruser как решение Решение Сообщение от useruser Ваш код Это не мой код, а ваш. Играем в игру "Найдите отличия" 0

@useruser 165 / 89 / 38 Регистрация: 29.06.2015 Сообщений: 1,098
	18.12.2017, 21:32 [ТС]	6
	Сообщение от Lazy_Den Это не мой код, а ваш. Играем в игру "Найдите отличия" Спасибо работает. Трудно играть в эту игру в 12 ночи. 0

Как корректно развернуть div на всё окно браузера?

Решение