1

Не понимаю как разделить страницу на две части так, что бы нижняя имела фиксированную высоту и всегда находилась внизу экрана, не съезжая за край, а верхняя занимала все оставшееся пространство сверху.

В принципе, можно сделать, как в этом вопросе, но в моем случае нужно иметь не только фиксированный подвал, но еще и динамическое масштабирование врехней части страницы, что бы она не оказалась под подвалом. Плюс не сразу понятно, что автор вопроса хочет получить.

flawless
  • 52
  • Да по сути задача звучит просто, но мучаюсь уже не первый день. На странице есть два дива с графиками - один сверху, другой снизу, нижний имеет фиксированную высоту и не может ни растягиваться ни сжиматься, верхний же можно сжимать. Хочу сделать, что бы при открытии страницы на маленьком экране нижний график оставался таким, каким должно (и был при этом всегда на экране, что бы не приходилось прокручивать внизу), а верхний сжимался до определенных пределов. – flawless Jun 12 '17 at 13:13

3 Answers3

2

.long{
  height: 3000px;
}
.d{
  height: 800px;
}
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

    

  • html #footer {
 position:absolute;
 top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
    • 



}
<html>
<head>
</head>
<body>
<div id = "long">

Some content<br>
</div>
<div class = "d">
Some content
</div>
<div id = "footer">
footer

</div
Виталий RS
  • 1,403
  • 3
    что это ? top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); А главное зачем для такой элементарнейшей задачи? – SVE Jun 12 '17 at 12:59
  • Спасибо за ответ. Нижнюю часть зафиксировать получилось, а вот как в таком случае сделать динамическую высоту у верхней, что бы занималось все свободное пространство и не съезжало под нижнюю часть? Ну и да, немного не понятно что делает предпоследняя строчка в css, попробовал без нее - вроде ничего не поменялось – flawless Jun 12 '17 at 13:15
  • 3
    -1 Это какая-то ересь с этим expression. – Vadim Ovchinnikov Jun 12 '17 at 13:24
  • CSS expression было представлено в IE 5.0, зачем его использовать? – soledar10 Jun 12 '17 at 14:08
2

Так?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 5000px;
}


section {
  height: calc(100vh - 70px);
}


footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 70px;
  color: #fff;
  background: #333;
  text-align: center;
}
<section></section>
<footer>footer</footer>
soledar10
  • 27,573
0

main {
  margin-bottom: 60px;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: rgba(180, 180, 180, .4);
}


/* имитация длинной страницы */
main div {
  margin-top: 400px;
}
<main>
  <div>Main content</div>
</main>
<footer>Footer</footer>
MihailPw
  • 6,384