Div Expand для визуального заполнения вертикального пространства
У меня есть страница, которая имеет верхний и нижний колонтитулы. Верхний и нижний колонтитулы имеют фиксированную высоту, и мне бы хотелось, чтобы содержимое регулировало его высоту так, чтобы оно динамически помещалось между верхним и нижним колонтитулами. Я планирую добавить фоновое изображение в свой контент, поэтому очень важно, чтобы оно на самом деле заполнило оставшуюся часть незанятого вертикального пространства.
Я использовалЛипкий нижний колонтитул подход, чтобы нижний колонтитул оставался внизу страницы. Это, однако, не позволяет содержимому охватывать всю высоту оставшегося пространства.
Я пробовал несколько решений, которые включали меня, добавляяheight:100%, height:auto; position:relative
но это не сработало.
<code>html, body { height: 100%; background-color: yellow; } header { width: 100%; height: 150px; background-color: blue; } header nav ul li { display: inline; padding: 0 30px 0 0; float: left; } #wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 0 -30px 0; /* the bottom margin is the negative value of the footer's height */ position: relative; } #wrapper #content { background-color: pink; width: 400px; height: 100%; margin: 0 0 -30px 100px; padding: 25px 30px 25px 30px; } footer { margin: -30px 0 0 0; width: 100%; height: 30px; background-color: green; }</code>
<code><div id="wrapper"> <header> <div id="logo"></div> <nav> <ul> <li>About</li> <li>Menu</li> <li>Specials</li> </ul> </nav> </header> <div id="content"> content <br>goes <br>here </div> </div> <footer>footer</footer></code>