Як зробити <div> завжди повний екран?

170

Незалежно від того, яким є його зміст.

Чи можна це зробити?

html css responsive

— Маска
джерело

2

Тут є велика кількість чудових відповідей, але я не бачу жодної згадки про флексокс, тому я подумав, що поділюсь цими двома центами: мати батьківський діл на 100% - це одне, але якщо прийде час поставити, влаштуйте , і зосередьте деякий вміст у цьому розділі, ви хочете подивитися на 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

106

Це моє рішення створити дію на повноекранному екрані, використовуючи чистий css. Він відображає повноекранний файл, який зберігається в прокрутці. І якщо вміст сторінки вміститься на екрані, на сторінці не з’явиться смуга прокрутки.

Тестовано в 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>

Розгорніть фрагмент

— Михай Cicu
джерело

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 Josh, чи можете ви, будь ласка, перевірити це на мені. Дякую.

<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>

— Трубка
джерело

вам не потрібно встановлювати ширину на 100%

— Адам Харте

Я не розумію; ви жорстко кодуєте висоту 800 пікселів на DIV. ОП хоче, щоб це було динамічним.

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

О, вибачте, не побачив, що там крадеться абсолютний (або вгорі / зліва). Ну добре тоді :)

— Адам Харте

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

— luiges90

1

Я чув, що є більш сучасні способи вирішення цього питання. @Tubbe Ви знаєте, чи це правда?

— 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на flex item:

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

div {
  flex: 1;
  background: tan;
}

<div></div>

Розгорніть фрагмент

— Морі
джерело

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, а також на Desktop; Хоробрий 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>

— Шардул
джерело

-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?

— Маска

@Mask Ні, немає. Ще ні в якому разі.

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

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

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

3

Це працює в IE7, Chrome3 та Safari4 та Opera10. Все перевірено на Windows. Недолік - це використання javascript, чого Маска хотів уникнути (дивіться його коментар до цієї відповіді). Відповідь TandemAdam - це чистий CSS, і він працює у всіх перевірених браузерах, крім Opera.

— трепет