Может ли div заполнить весь видовой экран пиксельным полем, не используя CSS свойство calc? - PullRequest
Новая
       27

Может ли div заполнить весь видовой экран пиксельным полем, не используя CSS свойство calc?

0 голосов
/ 19 февраля 2019

Я нашел (хакерский) способ, чтобы div занимал весь видовой экран браузера, за исключением поля на основе пикселей, используя свойство CSS3 calc, например, так (см. fiddle ):

css_gradient.html: 

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

css_gradient.css: 

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

div {
    background: linear-gradient(red, yellow);
    height: calc(100% - 26px);
    margin: 13px 0 0 13px;
    width: calc(100% - 26px);
}

Возможно ли этосделать то же самое только со свойствами CSS 2.1?Я знаю, что calc поддерживается в большинстве браузеров уже довольно давно, но также выглядит так, как будто наиболее популярные полифилы имеют свои ограничения .Я бился головой о стену, пытаясь найти более элегантное решение - например, такое, где мне не нужно блокировать увеличенный видовой экран с помощью overflow:hidden.Кажется, почти невозможно обойтись без использования calc или vh / vw единиц.

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019 

        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        div {
            height: 100%;
            margin: 0;
            width: 100%;
            position: relative;
        }
        div::before {
            position: absolute;
            top: 13px;
            left: 13px;
            bottom: 13px;
            right: 13px;
            content: '';
            background: linear-gradient(red, yellow);
        }
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Gradient div</title>
		<meta charset="utf-8">
	</head>
	<body>
		<div></div>
	</body>
</html>

Вы можете просто попробовать следующий CSS: 

    html, body {
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    div {
        height: 100%;
        margin: 0;
        width: 100%;
        position: relative;
    }
    div::before {
        position: absolute;
        top: 13px;
        left: 13px;
        bottom: 13px;
        right: 13px;
        content: '';
        background: linear-gradient(red, yellow);
    }
0 голосов
/ 19 февраля 2019

Для ширины вам не нужно ничего делать, поскольку по умолчанию она займет все пространство.А для роста вы можете рассмотреть прокладку на теле и использовать height:100%

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 13px 0;
  box-sizing:border-box;
}
div {
  background: linear-gradient(red, yellow);
  height: 100%;
  margin: 0 13px;
}
<body>
  <div></div>
</body>

Или заполнение со всех сторон без полей: 

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  padding: 13px;
  box-sizing:border-box;
}
div {
  background: linear-gradient(red, yellow);
  height: 100%;
}
<body>
  <div></div>
</body>

Или фиксированный элемент, и вам не нужно задавать ширину / высоту тела / html 

body > div {
  position:fixed;
  top:13px;
  left:13px;
  bottom:13px;
  right:13px;
  background: linear-gradient(red, yellow);
}
<body>
  <div></div>
</body>

Также можно рассмотреть использование прозрачной рамки: 

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
div {
  background: linear-gradient(red, yellow) padding-box;
  height: 100%;
  border:13px solid transparent;
  box-sizing:border-box;
}
<body>
  <div></div>
</body>
...