Это должно работать.
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: green;
}
#container {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
background-color: pink;
}
h1 {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
</div>
</body>
</html>
Цвета фона есть, чтобы вы могли увидеть, как это работает.Скопируйте этот код в файл и откройте его в своем браузере.Попробуйте немного поиграться с CSS и посмотрите, что произойдет.
width: inherit; height: inherit; извлекает ширину и высоту из родительского элемента.Это должно быть значением по умолчанию и не является действительно необходимым.
Попробуйте удалить блок h1 { ... } CSS и посмотрите, что произойдет.Вы можете заметить, что компоновка реагирует странным образом.Это связано с тем, что элемент h1 влияет на компоновку его контейнера.Вы можете предотвратить это, объявив overflow: hidden; на контейнере или теле.
Я бы также посоветовал вам прочесть о CSS Box Model .