Есть ли способ использовать CSS для стилизации HTML-элементов для отображения полной ширины страницы без помещения текст ⇐ CSS

[Anonymous]

Я хочу отобразить страницу без контента, которая просто визуально отображает базовую структуру HTML-страницы с использованием семантических тегов без фактического добавления какого-либо текстового содержимого (пока).
эффект, который я ищу, — это страница, которая выглядит следующим образом:
[img]https://i.sstatic.net /TM1b0DwJ.png[/img]

Вот HTML-код, который я написал на данный момент:

Код: Выделить всё

Document

#wrapper {
width: 500px;
margin: 0 auto;
}

header {
background-color: green;
width: 100%;
}

nav {
background-color: aqua;
width: 100%;
}

main {
background-color: lightblue;
width: 100%;
}

footer {
background-color: bisque;
width: 100%;
}

Моя проблема в том, что он вообще ничего не отображает, пока я не помещаю какой-нибудь текст в каждый из семантических тегов (даже если это &nbsp ; ).
Есть ли способ стилизовать теги так, чтобы они отображали полное поле для каждого семантического элемента , и по ширине страницы без необходимости добавления какой-нибудь текст в каждом из них?
Спасибо огромное

Подробнее здесь: https://stackoverflow.com/questions/791 ... -across-th