CODEWITHSUNDEEP
htmlcssresponsive
garvon-77
garvon-77

Reputation: 115

Content div btween header and footer 100% height

I am looking for a solution to an issue where my middle content div (main-content) does not auto adjust for responsive screens - it adjust to the content.

If I make the height 100% it travels off down the page and out of sight. I don't want to stick the footer to the bottom of the page as I find once I go to another screen size the footer remains in the place of the previous screen or content scrolls under the footer.

I have listed the basic html and css below. I am happy to come at a script solution.

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>

Upvotes: 1

Views: 54

Answers (2)

Andy Hoffman
Andy Hoffman

Reputation: 19111

In #main-content, you need to replace height: 100% with flex-grow: 1. This way, #main-content will take up the most available free column space.

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

Also, without box-sizing: border-box, these #navigation styles were causing a horizontal scrollbar.

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

To fix this, I added:

* {
  box-sizing: border-box;
}

Demo

* {
  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>

Upvotes: 2

Paul
Paul

Reputation: 76

Try adding top: 90% in the footer section

#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;
}

This should make it sit 90% from the top of the page in doing this it should auto adjust to your other pages

Upvotes: 0

Related Questions