Разделение содержимого между верхним и нижним колонтитулами 100% высоты - PullRequest
Новая
       11

Разделение содержимого между верхним и нижним колонтитулами 100% высоты

1 голос
/ 21 марта 2019

Я ищу решение проблемы, когда мой средний контент div (основной контент) не настраивается автоматически для адаптивных экранов - он подстраивается под контент.

Если я сделаю высоту 100%, она исчезнет со страницы и исчезнет из поля зрения.Я не хочу прикреплять нижний колонтитул к нижней части страницы, поскольку нахожу его, когда я перехожу к другому размеру экрана, нижний колонтитул остается на месте предыдущего экрана или прокрутки содержимого под нижним колонтитулом.

У меня естьперечислены основные HTML и CSS ниже.Я счастлив прийти к решению сценария. 

html, body {
    width: 100%;
    margin: 0;
    height: 100%;
    padding: 0 !important;
    font: normal 1.2rem "brandon-grotesque", arial, sans-serif;
    color: midnightblue;
}

#container {
    width: inherit;
    height: inherit;
    min-height: 100%;
    padding: 0;
    position: relative;
    display: flex;
    flex-flow: column;
}

#topbar {
    color: navy;
    width: 100%;
    text-align: right;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
    background-image: url("xxx");
    height: 50px;
    background-color: snow;
}

#logged {
    background: rgba(255,255,255,0.7);
    width: 16%;
    padding: 1.2rem;
    margin: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 70%;
}

#headerBar {
    margin: 0 auto;
    padding: 1rem;
    width: 70%;
}

#navigation {
    margin: 0;
    padding:1.5rem;
    width: 100%;
}
#content_upper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#main-content {
    clear: both;
    padding: 1% 3%;
    margin: 0 auto;
    background-color: #f9f9f9;
    height: 100%;
}
#footer {
    clear: both;
    bottom: 0px;
    width: 100%;
    display: inline-flex;
    padding: 2%;
    background-color: navy;
    min-height: 10%;
    color: white;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
}
<html>
<body>
   <container>
      <topbar></topbar>
      <logged></logged>
      <headbar></headbar>
      <navigation></navigation>
      <content_upper></content_upper>
      <main-content></main-content>
      <footer></footer>
   </container>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 21 марта 2019

В #main-content необходимо заменить height: 100% на flex-grow: 1.Таким образом, #main-content займет наиболее доступное свободное пространство столбца. 

#main-content {
  /* height: 100% */
  flex-grow: 1;
}

Кроме того, без box-sizing: border-box эти стили #navigation вызывали горизонтальную полосу прокрутки. 

#navigation {
  …
  padding:1.5rem;
  width: 100%;
}

Чтобы это исправить, я добавил: 

* {
  box-sizing: border-box;
}

Демо 

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0 !important;
  font: normal 1.2rem "brandon-grotesque", arial, sans-serif;
  color: midnightblue;
}

#container {
  width: inherit;
  height: inherit;
  min-height: 100%;
  padding: 0;
  position: relative;
  display: flex;
  flex-flow: column;
}

#topbar {
  color: navy;
  width: 100%;
  text-align: right;
  font: normal 0.8rem "Droid Sans", arial, sans-serif;
  background-image: url("xxx");
  height: 50px;
  background-color: snow;
}

#logged {
  background: rgba(255, 255, 255, 0.7);
  width: 16%;
  padding: 1.2rem;
  margin: 0;
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 70%;
}

#headerBar {
  margin: 0 auto;
  padding: 1rem;
  width: 70%;
}

#navigation {
  margin: 0;
  padding: 1.5rem;
  width: 100%;
}

#content_upper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#main-content {
  clear: both;
  padding: 1% 3%;
  margin: 0 auto;
  background-color: #f9f9f9;
  flex-grow: 1;
}

#footer {
  clear: both;
  bottom: 0px;
  width: 100%;
  display: inline-flex;
  padding: 2%;
  background-color: navy;
  min-height: 10%;
  color: white;
  font: normal 0.8rem "Droid Sans", arial, sans-serif;
}
<html>

<body>
  <div id="container">
    <div id="topbar"></div>
    <div id="logged"></div>
    <div id="headbar"></div>
    <div id="navigation"></div>
    <div id="content_upper"></div>
    <div id="main-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae magnam dolores
    </div>
    <div id="footer"></div>
  </div>
</body>

</html>
0 голосов
/ 21 марта 2019

Попробуйте добавить top: 90% в нижний колонтитул 

#footer {
    clear: both;
    top: 90%;
    bottom: 0px;
    width: 100%;
    display: inline-flex;
    padding: 2%;
    background-color: navy;
    min-height: 10%;
    color: white;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
}

Это должно занять 90% от верхней части страницы, при этом он должен автоматически адаптироваться к другим страницам

...