CODEWITHSUNDEEP
htmlcss
Sonali
Sonali

Reputation: 2273

div not extending to bottom

I want to create a layout like this-

enter image description here Footer is sticky.

Below is the code I tried:

body {
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -45px;
  background-color: #f2f2f2;
}

#header {
  height: 80px;
  width: 100%;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

.adminpanelContainer {
  background-color: white;
  padding: 40px;
  margin-top: 20px;
  height: 100%;
}

#footer {
  width: 100%;
  background-color: #fff;
  z-index: 1;
}

#footerwrapper {
  height: 45px;
}
<body>
  <div class="page-wrap">
    <header id="header">
      <div class="container"></div>
    </header>
    <div id="body">
      <div class="container" style="height:100%;">
        <div class="panelContainer"></div>
      </div>
    </div>
  </div>
  <footer id="footer">
    <div class="container" id="footerwrapper"></div>
  </footer>
</body>

I am giving height: 100% to .adminpanelContainer and its ancestors also but there is no effect on it.

I want the white area to expand across the whole web page irrespective of their height.

What changes I have to make to extend the div till bottom.

Upvotes: 0

Views: 99

Answers (2)

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This will work for you:

I have just added ↓

#body .container{
  height: calc(100vh - (90px + 45px));
}

the calculation is as follows:

height: calc(100ViewportHeight - (#header[height+padding-bottom]+ #footerwrapper[height]));

If you want to learn more about calc and vh, please click on them.

A working Sample from your snippet:

body {
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -45px;
  background-color: #f2f2f2;
}

#header {
  height: 80px;
  width: 100%;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

.adminpanelContainer {
  background-color: white;
  padding: 40px;
  margin-top: 20px;
  height: 100%;
}

#footer {
  width: 100%;
  background-color: #fff;
  z-index: 1;
}

#footerwrapper {
  height: 45px;
}

#body .container{
  height: calc(100vh - (90px + 45px));
}
<body>
  <div class="page-wrap">
    <header id="header">
      <div class="container">

      </div>
    </header>
    <div id="body">
      <div class="container" >
        <div class="panelContainer">

        </div>
      </div>
    </div>
  </div>
  <footer id="footer">
    <div class="container" id="footerwrapper">

    </div>
  </footer>
</body>

Hope this was helpful for you.

Upvotes: 1

UncaughtTypeError
UncaughtTypeError

Reputation: 8712

Without adjusting any existing markup the intended behaviour can be achieved by declaring <percentage> height unit values for applicable nested elements as well.

  1. Start by declaring a relative height (with percentage unit values) for the element #body - account for the combined height of the nested header & footer elements, e.g:

    #body {
    /* 100% height minus the sum of header & footer height */
    height: calc(100% - 125px);
}

  2. Next, declare height: 100% for any further nested elements that are required to occupy the full available height of the viewport, e.g:

    .panelContainer {
    height: 100%;
}

The code snippets below demonstrate this behaviour with both fixed and relative footer elements.

Fixed Footer: 

body {
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.page-wrap { /* adjusted */
  height: 100%;
  background-color: #f2f2f2;
}

#header {
  height: 80px;
  width: 100%;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

.adminpanelContainer {
  background-color: white;
  padding: 40px;
  margin-top: 20px;
  height: 100%;
}

#footer {
  width: 100%;
  background-color: #fff;
  z-index: 1;
  /* additional */
  position: fixed;
  bottom: 0;
}

#footerwrapper {
  height: 45px;
}

/* Additional */
* {
  box-sizing: border-box;
}

#body {
    height: calc(100% - 125px); /* 100% height minus the sum of header & footer height */
}

.panelContainer {
    height: 100%;
    /* following styles added just for the sake of demonstration */
    background: white;
    border: 1px solid #d6d6d6;
    box-sizing: border-box;
    max-width: 80%;
    margin: auto;
}

.panelContainer .inner {
  position: relative;
  height: 100%;
}

.panelContainer .inner span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    margin: auto;
}
<body>
  <div class="page-wrap">
    <header id="header">
      <div class="container">
        <span>height: 80px</span>
      </div>
    </header>
    <div id="body">
      <div class="container" style="height:100%;">
        <div class="panelContainer">
          <div class="inner"><span>relative height declared with <code>percentage</code> values</span></div>
        </div>
      </div>
    </div>
  </div>
  <footer id="footer">
    <div class="container" id="footerwrapper">
      <div class="container">
        <span>height: 45px</span>
      </div>
    </div>
  </footer>
</body>

Relative Footer:

body {
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}

.page-wrap { /* adjusted */
  height: 100%;
  background-color: #f2f2f2;
}

#header {
  height: 80px;
  width: 100%;
  background-color: #fdbb30;
  position: relative;
  padding-bottom: 10px;
}

.adminpanelContainer {
  background-color: white;
  padding: 40px;
  margin-top: 20px;
  height: 100%;
}

#footer {
  width: 100%;
  background-color: #fff;
  z-index: 1;
  /* additional */
  position: relative;
  bottom: 0;
}

#footerwrapper {
  height: 45px;
}

/* Additional */
* {
  box-sizing: border-box;
}

body {
    padding-bottom: 45px;
}

#body {
    height: calc(100% - 80px); /* 100% height minus the height of the header */
}

.panelContainer {
    height: 100%;
    /* following styles added just for the sake of demonstration */
    background: white;
    border: 1px solid #d6d6d6;
    box-sizing: border-box;
    max-width: 80%;
    margin: auto;
}

.panelContainer .inner {
  position: relative;
  height: 100%;
}

.panelContainer .inner span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    margin: auto;
}
<body>
  <div class="page-wrap">
    <header id="header">
      <div class="container">
        <span>height: 80px</span>
      </div>
    </header>
    <div id="body">
      <div class="container" style="height:100%;">
        <div class="panelContainer">
          <div class="inner"><span>relative height declared with <code>percentage</code> values</span></div>
        </div>
      </div>
    </div>
  </div>
  <footer id="footer">
    <div class="container" id="footerwrapper">
      <div class="container">
        <span>height: 45px</span>
      </div>
    </div>
  </footer>
</body>

Practical Interactive CodePen Demonstrations:

Here you can observe practical demonstrations, for fixed and relative footers, which allow content to be added or removed dynamically. In addition, these demonstrations also account for dynamic footer heights.

  1. Keeping a Fixed Footer at the bottom of page (Dynamic Footer Height)
  2. Keeping a Relative Footer at the bottom of page (Dynamic Footer Height)

Upvotes: 0

Related Questions