Как заставить мой нижний колонтитул поднять оставшуюся высоту, когда я не использую макет страницы flexbox? - PullRequest
Новая
       34

Как заставить мой нижний колонтитул поднять оставшуюся высоту, когда я не использую макет страницы flexbox?

0 голосов
/ 29 апреля 2018

Я хотел создать нижний колонтитул, который занимал бы оставшуюся часть неиспользуемого пространства на моей странице. Я нашел этот пример - Сделать div заполнить высоту оставшегося пространства экрана , но он использует flex-боксы, и я не использую это на моей текущей странице: 

html {
  height: 100%;
}

body {
  margin: 0;
  text-align: center;
  height: 100%;
}

footer {
  background-color: #003162;
  padding: 5px;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
}

footer a {
  color: #fdb515;
}
<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>

Странно, что нижний колонтитул занимает слишком много места. Это вызывает прокрутку, хотя это не то, что я просил - https://jsfiddle.net/g7Ldc7pt/2/. Как мне сказать, чтобы нижний колонтитул занял оставшееся видимое пространство? Я хочу использовать полосу прокрутки только в том случае, если содержимое не видно, но его все есть.

Ответы [ 2 ]

0 голосов
/ 30 апреля 2018

Единственное решение non-flex & non-grid динамическое возможно с display: table на родительском и display: table-row на дочерний элемент : 

html, body {
  height: 100%; /* mandatory */
}

body {
  display: table; /* added */
  width: 100%; /* added  */
  margin: 0;
  text-align: center;
}

footer {
  display: table-row; /* added */
  height: 100%; /* mandatory */
  background-color: #003162;
  /*padding: 5px; has no effect, that's why you need to put it on the "td" child */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 80%;
}

footer a {
  display: table-cell; /* added */
  padding: 5px; /* added */
  color: #fdb515;
}
<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>
0 голосов
/ 30 апреля 2018

Единственный способ сделать нижний колонтитул, используя оставшуюся часть сайта, это 1. установить конкретную высоту для заголовка и содержимого и 2. установить высоту нижнего колонтитула в «calc (100% - (HEIGHT_OF_HEADER + HEIGHT_OF_CONTENT) Я также попробовал это с Javscript, но не случайно ... Типп: используйте мой код в режиме полной страницы 

html {
    height: 100%;
}

body {
    margin: 0;
    text-align: center;
    height: 100%;
}

header{
  height: 60px;
}

#main{
  height: 400px
}


footer {
    background-color: #003162;
    padding: 5px;
    height: calc(100% - 470px);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80%;
}

footer, footer a {
        color: #fdb515;
}
<header>
  <div id="banner">
    Header
  </div>
</header>

<div id="main">Content</div>

<footer><a href='#'>Terms of Service</a></footer>
...