Как сделать <div> всегда полноэкранным?

170

Неважно, каково его содержание.

Можно ли это сделать?

html css responsive

2

Здесь есть много отличных ответов, но я не вижу упоминания о flexbox, поэтому я решил поделиться этими двумя центами: иметь родительский div равным 100% - это одно, но если придет время, договориться и центрируйте некоторый контент в этом div, вы захотите взглянуть на flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox

— ArleyM

146

Это всегда работает для меня:

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

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

— Адам Харт
источник

1

@AdamHarte Почему это не работает, если вы удалите селектор «html» из CSS? → тело {рост: 100%; поле: 0; }

— Алекс Прут

2

@ P.Alex Math! Если высота ваших HTML-тегов растягивается, чтобы соответствовать их содержанию, тогда высота тела составляет 100% его родительского элемента, тогда вы не будете увеличивать его до 100% доступного пространства.

— Адам Харт

1

Я только что попробовал это в wpf с помощью хрома cefsharp, и это работает :)

— adminSoftDK

107

Это мое решение для создания полноэкранного div, используя чистый CSS. Он отображает полный экран Div, который является постоянным при прокрутке. И если содержимое страницы помещается на экране, на странице не будет отображаться полоса прокрутки.

Протестировано в IE9 +, Firefox 13+, Chrome 21+

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

Развернуть фрагмент

— Михай Кику
источник

58

Это наиболее стабильный (и простой) способ сделать это, и он работает во всех современных браузерах:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}

<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

Развернуть фрагмент

_{Протестировано для работы в Firefox, Chrome, Opera, Vivaldi, IE7 + (на основе эмуляции в IE11).}

— трепет
источник

1

Он работает лучше , если вы используете следующее: position: fixed; top: 0; left: 0;а теперь ту часть , которая отличается: width: 100%; height: 100%;. Это на самом деле работает в старых браузерах также безупречно.

— Aart den Braber

1

Почему лучше использовать ширину и высоту, чем нижнюю и правую? Если вы используете ширину и высоту, а также хотите добавить отступы и / или границу, вам также нужно убедиться, что вы это сделали box-sizing: border-box;, в противном случае вы получите большую рамку, которая вызовет прокрутку. Смотрите это .

— благоговение

31

Лучший способ сделать это с современными браузерами - это использовать Viewport- процентную длину, возвращаясь к обычной процентной длине для браузеров, которые не поддерживают эти единицы .

Длина в процентах от окна просмотра зависит от длины самого окна просмотра. Здесь мы будем использовать две единицы измерения vh(высота области просмотра) и vw(ширина области просмотра). 100vhравно 100% высоты области просмотра и 100vwравно 100% ширины области просмотра.

Предполагая следующий HTML:

<body>
    <div></div>
</body>

Вы можете использовать следующее:

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

Вот демонстрация JSFiddle, которая показывает divэлемент, заполняющий и высоту и ширину результирующего кадра. Если вы изменяете размер результирующего кадра, размер divэлемента изменяется соответственно.

— Джеймс Доннелли
источник

18

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

<html>
<head>
    <title>Hellomoto</title>
    <style text="text/javascript">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

— Tubbe
источник

вам не нужно устанавливать ширину на 100%

— Адам Харт

Я не понимаю этого; Вы жестко программируете высоту 800px на DIV. ОП хочет, чтобы это было динамичным.

— Джош Стодола

О, извините, не видел этого подлого абсолюта (или сверху / слева). Ну, тогда все в порядке :)

— Адам Харт

Как примечание, вы можете использовать position: fixedвместо этого, если страница может прокручиваться, но учтите, что она не работает в некоторых мобильных браузерах caniuse.com/#feat=css-fixed

— luiges90

1

Я слышал, что есть более современные способы решения этой проблемы. @ Тубе, ты знаешь, правда ли это?

— Bzlm

8

То , что я нашел лучший элегантный способ, как в следующем, самый трюк здесь сделать div«S position: fixed.

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

Развернуть фрагмент

— Джефф Тиан
источник

8

Измените bodyэлемент на a, flex containerа divна a flex item:

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

<div></div>

Развернуть фрагмент

— Mori
источник

8

Вот самое короткое решение, основанное на vh. Обратите внимание, что vhне поддерживается в некоторых старых браузерах .

CSS:

div {
    width: 100%;
    height: 100vh;
}

HTML:

<div>This div is fullscreen :)</div>

— olieidel
источник

1

Это удобно, но есть проблемы в мобильных браузерах: css-tricks.com/the-trick-to-viewport-units-on-mobile

— Александр Ким

Зачем усложнять дело? Это делает работу в мобильных браузерах DuckDuckGo 5.54.0, Samsung Internet 11.2.1.3 и Chrome 81.0.4044.138, а также на рабочем столе; Храбрый 1.10.97, Chrome 83.0.4103.116 и Safari 12.1.2.

— Якоб

1

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

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>

— Shardul
источник

-8

К сожалению, heightсвойство в CSS не так надежно, как должно быть. Поэтому Javascript необходимо будет использовать для установки стиля высоты рассматриваемого элемента на высоту области просмотра пользователей. И да, это можно сделать без абсолютного позиционирования ...

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

— Джош Стодола
источник

1

Если вы используете библиотеку, такую как jQuery (рекомендуется), $(window).height();наилучшим решением будет получить высоту .

— Джош Стодола

Есть ли чистое решение CSS?

— Маска

@ Маск Нет, нет. Пока что нет.

— Джош Стодола

@Jed Как насчет того, чтобы попытаться применить минимальную высоту: 100% и попробовать это в Mac-Safari, и, возможно, мы сможем найти решение здесь. Я думаю, что это было бы лучше, чем спорить о платформах.

— Джош Стодола

3

Это работает в IE7, Chrome3 и Safari4 и Opera10. Все проверено на Windows. Недостаток в том, что он использует javascript, чего Маск хотел избежать (см. Его комментарий к этому ответу). Ответ TandemAdam - чистый CSS, и он работает во всех браузерах, которые я тестировал, кроме Opera.

— благоговение