Dynamic content height without vertical border

Question

After several hours I was able to create a layout with a fixed header, a dynamic content height and the footer always in the (screen) bottom. Here is the code: https://jsfiddle.net/r56oqg41/

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #DEDEDE;
}
#main {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
#head {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #115293;
  background-color: #1976D2;
}
#head #head_content {
  width: 600px;
  padding: 6px;
  color: #FFFFFF;
  margin: 0 auto;
  text-align: center;
}
#body {
  flex: 1;
  width: 600px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-left: 1px solid #BFBFBF;
  border-right: 1px solid #BFBFBF;
}
#body #menu {
  float: left;
  width: 150px;
  padding: 10px;
  background-color: #94C9FF;
  border-right: 1px solid #BFBFBF;
}
#body #page {
  overflow: hidden;
  padding: 10px;
  color: #5C5C5C;
}
#foot {
  width: 100%;
  height: 40px;
  color: #FFFFFF;
  border-top: 1px solid #115293;
  background-color: #1976D2;
}
#foot #foot_content {
  width: 600px;
  padding: 6px;
  margin: 0 auto;
  text-align: center;
}

<div id="main">
  <div id="head">
    <div id="head_content">
      HEADER
    </div>
  </div>
  <div id="body">
    <div id="menu">
      MENU
    </div>
    <div id="page">
      <p>PAGE CONTENT 01</p>
      <p>PAGE CONTENT 02</p>
      <p>PAGE CONTENT 03</p>
      <p>PAGE CONTENT 04</p>
      <p>PAGE CONTENT 05</p>
      <p>PAGE CONTENT 06</p>
      <p>PAGE CONTENT 07</p>
      <p>PAGE CONTENT 08</p>
      <!--
                <p>PAGE CONTENT 09</p>
                <p>PAGE CONTENT 10</p>
                <p>PAGE CONTENT 11</p>
                <p>PAGE CONTENT 12</p>
                <p>PAGE CONTENT 13</p>
                <p>PAGE CONTENT 14</p>
                <p>PAGE CONTENT 15</p>
                <p>PAGE CONTENT 16</p>
                <p>PAGE CONTENT 17</p>
                <p>PAGE CONTENT 18</p>
                <p>PAGE CONTENT 19</p>
                <p>PAGE CONTENT 20</p>
-->
    </div>
  </div>
  <div id="foot">
    <div id="foot_content">
      FOOTER
    </div>
  </div>
</div>

The problem is the vertical border of the menu (or the #page) stays hidden when there is no content...

I do not want the footer to be always fixed in the bottom. It will depends on the page content.

Another problem is this solution does not work in IE11 (and maybe all below versions) :(

Please, is there a way to always show the vertical border?

Thanks!

Possible duplicate of [Variable content div height using css with fixed header and footer](http://stackoverflow.com/questions/6503035/variable-content-div-height-using-css-with-fixed-header-and-footer) — sergdenisov, Feb 12 '17 at 21:01

score 1 · Accepted Answer · edited May 23 '17 at 12:34

body {
  margin: 0;
  padding: 0;
  background: #DEDEDE;
}
#main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#head {
  height: 40px;
  border-bottom: 1px solid #115293;
  background-color: #1976D2;
}
#head #head_content {
  width: 600px;
  padding: 6px;
  color: #FFFFFF;
  margin: 0 auto;
  text-align: center;
}
#body {
  flex: 1;
  width: 600px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-left: 1px solid #BFBFBF;
  border-right: 1px solid #BFBFBF;
  display: flex;
}
#body #menu {
  width: 150px;
  padding: 10px;
  background-color: #94C9FF;
  border-right: 1px solid #BFBFBF;
}
#body #page {
  padding: 10px;
  color: #5C5C5C;
}
#foot {
  width: 100%;
  height: 40px;
  color: #FFFFFF;
  border-top: 1px solid #115293;
  background-color: #1976D2;
}
#foot #foot_content {
  width: 600px;
  padding: 6px;
  margin: 0 auto;
  text-align: center;
}

<div id="main">
  <div id="head">
    <div id="head_content">HEADER</div>
  </div>
  <div id="body">
    <div id="menu">MENU</div>
    <div id="page">
      <p>PAGE CONTENT 01</p>
      <p>PAGE CONTENT 02</p>
      <p>PAGE CONTENT 03</p>
      <p>PAGE CONTENT 04</p>
      <p>PAGE CONTENT 05</p>
      <p>PAGE CONTENT 06</p>
      <p>PAGE CONTENT 07</p>
      <p>PAGE CONTENT 08</p>
      <p>PAGE CONTENT 09</p>
      <p>PAGE CONTENT 10</p>
      <p>PAGE CONTENT 11</p>
      <p>PAGE CONTENT 12</p>
      <p>PAGE CONTENT 13</p>
      <p>PAGE CONTENT 14</p>
      <p>PAGE CONTENT 15</p>
      <p>PAGE CONTENT 16</p>
      <p>PAGE CONTENT 17</p>
      <p>PAGE CONTENT 18</p>
      <p>PAGE CONTENT 19</p>
      <p>PAGE CONTENT 20</p>
    </div>
  </div>
  <div id="foot">
    <div id="foot_content">FOOTER</div>
  </div>
</div>

jsFiddle

For IE11 support, see this post: flex property not working in IE

Farzin Kanzi · Answer 2 · 2017-02-12T21:24:37.807

0

It is because the width of div id="body" is more than of the width of the screen. Remove width: 600px; and

#body{width:99%;}

edited Feb 12 '17 at 21:24

answered Feb 12 '17 at 21:00

Farzin Kanzi

3,380
2
21
23

Dynamic content height without vertical border

2 Answers2

jsFiddle

Linked