Как сделать блок на весь экран css

Блок на весь экран в css

Привет всем, подскажите, пожалуйста, что я делаю не так: хочу сделать так, чтобы на экране было два картинки на весь экран. Наводишь на картинку, и она меняется, показывая какую-то информацию. Картинки должны быть ссылками. Я делаю два блока, в них запихиваю два изображения, но если указывать изображение в css, то я его не могу растянуть на весь экран, вот мой код: css:

 body < -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Современные браузеры */ >#container < position: relative; width: 100%; >#left < position: absolute; top: 0px; left: 0px; width: 50%; >#right < position: absolute; top: 0px; right: 0px; width: 50%; >.img < position:fixed; display: inline-block; min-width:50%; min-height:100%; background: transparent url(http://htmlbook.ru/example/images/sun1.png) ; /* Путь к файлу с исходным рисунком */ >.img:hover < width:50px; height:10px; background: url(http://htmlbook.ru/example/images/sun2.png) no-repeat; /* Путь к файлу с исходным рисунком */ >

    Demo

введите сюда описание изображения

Результат (слева не могу растянуть картину):

Отслеживать
задан 28 июл 2015 в 21:49
569 5 5 серебряных знаков 21 21 бронзовый знак
Попробуй средствами Javascript
28 июл 2015 в 21:57
естественно, background не будет растягивать блок, может просто тэг img использовать ?
28 июл 2015 в 22:32

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Если я правильно понял, нужно что бы изображение указанное в background-image растягивалось на ширину и высоту контейнера. Для этого достаточно указать background-size: 100% 100% . Если указать только одно значение 100% , то оно будет действовать только на ширину, при этом высота будет равна auto , что позволит сохранить пропорции.

Отслеживать
ответ дан 28 июл 2015 в 22:40
673 3 3 серебряных знака 10 10 бронзовых знаков
Спасибо, выручили
28 июл 2015 в 22:48

Если делать с помощью JavaScript

Сорри, если используешь jQuery 😉

.    
    
 .

CSS (добавить немного):

#right, #left < height: 100%; /*Во всю высоту*/ overflow: hidden; >#container img< vertical-align: top; display: block; /* > Можно убрать */ >

JavaScript (Добавил в HTML после блока #container)

// Инициализация пикч var img_1 = document.getElementById( 'img1' ), img_2 = document.getElementById( 'img2' ); // Минимальные значение до которых может сузиться пикча. var min_width = 500, min_height = 400; // Размеры пикчи по умолчаниею var def_width = 1200, def_height = 800; function resize() < var w = innerWidth / 2, // Ширина экрана ПОПОЛАМ! (не кроссбраузерно) h = innerHeight; // Высота экрана (не кроссбраузерно) // Получение новых значений var new_width = w >min_width ? w : min_width, // Новая ширина пикчи new_height = h > min_height ? h : min_height , // Новая высота // Считаем var ww = new_width, hh = new_width / ( def_width / 100 ) * ( def_height / 100 ); var marginTop = ( h - new_height ) / -2, marginLeft = 0; if( hh < new_height )< hh = new_height; ww = new_height / ( def_height / 100 ) * ( def_width / 100 ); marginTop = 0; marginLeft = ( ww - new_width ) / -2; >// Присваиваем img_1.style.width = ww + 'px'; img_1.style.height = hh + 'px'; img_1.style.marginTop = marginTop + 'px'; img_1.style.marginLeft = marginLeft + 'px'; img_2.style.width = ww + 'px'; img_2.style.height = hh + 'px'; img_2.style.marginTop = marginTop + 'px'; img_2.style.marginLeft = marginLeft + 'px'; >; window.onresize = resize; resize();

Двигаешь, шевелиши экран как хочешь, они будут вставать ровно по ценру. Если ошибка какая нибудь, отпиши. Я со своего кода скатывал. Этот не чекал.

CSS width 100%. Блок, который занимает всю ширину веб-страницы.

В современной верстке, на веб-страницах часто можно встретить блоки, которые занимают 100% ширины страницы.

Это выглядит вот так:

28-04-2014 6-00-18

28-04-2014 6-00-47

Давайте разберемся, каким образом можно добиться такого эффекта.

Для примера, давайте рассмотрим следующую ситуацию.

 Блок, который должен занимать 100% ширины.

Смотрим на результат, который получился.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

В целом хорошо, но по бокам блока видны небольшие отступы, которые портят всю картину. Хотелось бы их убрать.

28-04-2014 6-01-10

Первое, что приходит на ум, это присвоить блоку свойство width:100%. Но, это никак не изменит ситуацию. Можете сами в этом убедиться.

 Блок, который должен занимать 100% ширины.

Поэтому свойство width:100% можете смело убирать.

В чем же реальная причина таких отступов?

Дело в том, что блок div, ширину которого мы хотим сделать 100% хранится в двух родительских элементах body и html. По умолчанию, браузеры задают им определенные значения для свойств padding и margin.

Для того, чтобы решить проблему, нужно всего-лишь обнулить эти отступы. Сделать это очень просто:

html, body

Смотрим, как выглядит блок теперь.

Все отлично, пространство, которое было по бокам, было убрано.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

height

Любой HTML-элемент сам по себе по высоте равен нулю. Обычно элементы подстраиваются по высоте под то количество контента, которое лежит у него внутри. Но что делать, если дизайнер придумал иначе, или если внутри вообще ничего нет?

При помощи свойства height можно задать высоту любому блочному (block) или строчно-блочному (inline-block) элементу. Высоту можно задавать как в абсолютных единицах (пикселях px ) так и в относительных (проценты, vh , vmin , rem и так далее).

Помимо фиксированной высоты мы можем задать минимальную высоту элемента — min — height . В этом случае элемент сможет растягиваться на большую высоту, если того требует контент, размещённый внутри, но никогда не сожмётся по высоте меньше, чем указано в свойстве min — height .

Для максимальной высоты мы пишем свойство max — height . И тогда элемент будет иметь возможность растягиваться по высоте до тех пор, пока не достигнет размера, указанного в свойстве max — height . И дальше не растянется ни на пиксель.

Пример

Скопировать ссылку «Пример» Скопировано

 div class="container"> div class="item">div> div>

 .container  /* высота родителя */ height: 150px; padding: 25px; background-color: #AFC9DA;> .item  /* высота вложенного блока */ height: 50px; margin: 0 10px; background-color: #FFFFFF;> .container  /* высота родителя */ height: 150px; padding: 25px; background-color: #AFC9DA; > .item  /* высота вложенного блока */ height: 50px; margin: 0 10px; background-color: #FFFFFF; >

Поскольку оба блока — .container и .item — пустые, в них нет контента, то без стилей их высота будет равна нулю. Мы изменили это, задав элементу .container высоту 150px , а элементу .item высоту 50px .

Добавим контент в элемент .item :

Из-за фиксированной высоты контент вываливается из блока. Как можно это исправить? Заменить height на min — height !

 .item  /* Меняем фиксированную высоту на минимальную */ min-height: 50px; margin: 0 10px; background-color: #FFFFFF;> .item  /* Меняем фиксированную высоту на минимальную */ min-height: 50px; margin: 0 10px; background-color: #FFFFFF; >

Теперь, если контента внутри не будет, то высота блока будет равна 50px , но как только появится контент — элемент растянется по высоте так, чтобы уместить в себе весь контент!

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство height даёт возможность менять высоту любого блока на своё усмотрение.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Пишем свойство height для фиксированной высоты, min — height для минимальной высоты и max — height для максимальной высоты.

Для элемента можно написать только одно из них, два или все три сразу, если это нужно для решения конкретной задачи.

В качестве значения пишем число, а за ним без пробела единицу измерения: px , % , vh , rem , em или любую другую единицу измерения, доступную в вебе.

 div  height: 10px; min-height: 100%; max-height: 100vh;> div  height: 10px; min-height: 100%; max-height: 100vh; >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство высоты не наследуется.

�� По умолчанию задаётся значение auto .

Это ключевое слово бывает полезно, когда нужно сбросить высоту, заданную ранее. Например, оно пригодится при доработке сайта, к исходным стилям которого нет доступа.

Стили, до которых нет доступа с фиксированной высотой:

 .container  height: 150px;> .container  height: 150px; >

Твои стили, где перезаписывается предыдущее значение: теперь высота подстраивается под контент.

 .container  height: auto;> .container  height: auto; >

Также оно может пригодится при адаптивной вёрстке.

�� Не задавайте фиксированную высоту блокам, в которых есть контент. Если контента станет больше, то блок не растянется и контент из него выпадет. Не надо так. Если без высоты никак не обойтись, то используйте min — height .

�� Строчные элементы не реагируют на height . Хотите изменить высоту? Меняйте элемент со строчного ( inline ) на блочный ( block ) или строчно-блочный ( inline — block )!

�� Пишете height : 100 % и ничего не работает? Помните, что высота в процентах рассчитывается от высоты родителя. И сработает, только если у родителя задана эта самая высота.

Отношения родительский-дочерний элемент проще объяснить на примере.

 div class="parent"> div class="child child-1"> div class="grandchild">div> div> div class="child">div> div class="child">div> div>

В примере выше элемент с классом parent является родительским для элементов с классом child . Они, в свою очередь, будут называться дочерними по отношению к элементу с классом parent .

Для элемента с классом grandchild родительским будет элемент с классом child — 1 .

Применительно к нашей ситуации элемент grandchild будет наследовать свою высоту от элемента child — 1 .

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Чаще всего не требуется задавать фиксированную высоту блокам с контентом. Можно обойтись внутренними отступами ( padding ).

Вернёмся к примеру, который разбирали выше. Можно совсем убрать свойство height и заменить его на padding : 25px . Теперь, если контента внутри блока нет, то внутренние отступы сверху (25 пикселей) и снизу (25 пикселей) будут растягивать элемент на 50 пикселей.

Как только добавится контент, блок растянется, не произойдёт никакого выпадения контента, потому что не задана фиксированная высота. От верхнего и нижнего краёв контента до верхнего или нижнего краёв блока соответственно будут отступы в 25 пикселей.

Чтобы родительский блок .container тоже подстраивался под размеры контента, можно:

Заменить фиксированную высоту на минимальную: min — height : 150px .

Убрать высоту совсем и заменить её на внутренние отступы ( padding ). Этот вариант подойдёт, если не принципиально сохранить высоту 150 пикселей.

�� Но есть несколько ситуаций, в которых без высоты никак.

В блоке нет контента. Он декоративный. Например, квадрат. Задаём одинаковые высоту и ширину. Profit!
Первый экран сайта. Обычно дизайнеры хотят, чтобы первый экран всегда был по высоте не больше и не меньше высоты экрана пользователя. В этом случае поможет height : 100vh . Не забудь подстраховаться и задать минимальную высоту блоку. Например: min — height : 350px . Никогда нельзя быть уверенным, что высоты экрана пользователя достаточно для того, чтобы уместился весь важный контент.

�� В реальных задачах крайне редко требуется задавать высоту в относительных единицах rem и em . Эти единицы завязаны на размере шрифта. Рассчитывать высоту блока от размера текста почти никогда не требуется.

Но другие относительные единицы: vh , vw , а также vmin и vmax — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.

Как сделать блок на весь экран css

Сложно поверить, что когда-то вертикальное выравнивание элемента внутри контейнера было трудной задачей для верстальщика. Сейчас у нас есть Flexbox – можно больше не страдать!

Чтобы достичь этого, требуется всего пара строчек CSS: