CODEWITHSUNDEEP
css
letsCode
letsCode

Reputation: 3046

Sticky Header/Footer With 3 columns. Divs that scroll within the columns

I have a JS Fiddle here.

https://jsfiddle.net/h3c6jqfy/

Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.

enter image description here

The very basic layout I created has this in it...

d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!

The part where it says this is the end!! is never reached.

Upvotes: 0

Views: 138

Answers (2)

Paulie_D
Paulie_D

Reputation: 115108

You can use flexbox without the need to calculate heights;

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

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  height: 75px;
  background: red;
}

main {
  flex: 1;
  background: lightgreen;
  display: flex;
}

.scrolly {
  flex: 1 0 33%;
  overflow-y: auto;
}

.content {
  height: 1000px;
}

footer {
  height: 50px;
  background: blue;
}
<header></header>
<main>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  </div>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  </div>
</main>
<footer></footer>

Upvotes: 2

IvanS95
IvanS95

Reputation: 5732

NOTE: See Fiddle in Full Screen

You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height

<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}

#header{
   height:100px; top:0; background: #4A4A4A;

}
#footer{
  height:100px; bottom:0; background: #4A4A4A;
}
#content{
  top:100px;
  height: calc(100% - 100px);
  background:#fff;
  display: flex;
  align-items: stretch;
}

</style>

<div>
<div id="header">HEADER</div>
<div id="content">
  

      <div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
        <div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
          <div style="overflow: auto; max-height: inherit; padding: 10px;">
    			<br>d<br>d<br>d<br>d<br>d<br>d<br>d
				<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
                d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
                d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
                d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
                d<br>d<br>d
                <br>d<br>this is the end!!
          </div>
        </div>
      </div>

      <div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
        <div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
          middle
        </div>
      </div>

      <div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
        <div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
          right
        </div>
      </div>
     
</div>
<div id="footer">FOOTER</div>
</div>

Upvotes: 1

Related Questions