CODEWITHSUNDEEP
htmlcss
polmarex
polmarex

Reputation: 1383

DIV overlapping sticky footer

I have a div containing three other divs: header, content, footer

  <div class="note">
    <div class="header">Title</div>
    <div class="content" contenteditable="true">Some content</div>
    <div class="footer">Footer</div>
  </div>

Footer is always at the bottom of the parent div. Here is some CSS:

.note {
  position: relative;
  width: 40%;
  height: 200px;
  overflow: hidden;
  padding: 6px;
  margin-top: 10px;
}
.note .footer {
  position: absolute;
  bottom: 0px;
}
.note .content {
  overflow: hidden;
}

Middle div is for text input. The problem is that it overlaps the footer when there is too much text. I want the middle div to be a scrollable area, that does not overlap footer. It can be done with setting height of that div, but this is not good for me - the div with class 'note' will be resizable. How can I do it?

Here is working plunker: http://plnkr.co/edit/Jhsn9EziMLs6IUCUg2ah?p=preview

Upvotes: 3

Views: 11550

Answers (4)

Satwik Nadkarny
Satwik Nadkarny

Reputation: 5135

First things first:

Remove the absolute positioning on the footer.

position: absolute;

This takes the footer 'outside' of the normal flow of the document. So, if your content increases, the footer will always appear to 'overlap' withe the content.

Instead, use relative positioning for the footer:

.content {
    background-color:Orange;
    height:400px;
    overflow: hidden;
}

.footer {
    position: relative;
    bottom: 0px;
    background-color:Black;
    color:White;

}

In the above code, you can change the height of the content and you will observe that the footer always stays at the bottom of the page irrespective of the 'size' of the content.

You'll also need to add a min-height to the content div so that gives the appearance taht the footer is always at the bottom of the screen. Just thought I'll let you know that!!

See this here-> http://jsfiddle.net/9dUJY/

Hope this helps!!!

Upvotes: 7

Chris Rymer
Chris Rymer

Reputation: 713

You have no height set on your content and have not activated scroll. The fact you are adding scroll to a 100px height container makes me feel you will have a usability issue later.

updated version

Be aware of supported browsers, if you are working with modern instances only you will be OK. IE8 it appears is supported.

Check the MDN Docs

.note {
  position: relative;
  width: 40%;
  height: 100px;
  padding: 6px;
  overflow: hidden;
  margin-top: 10px;
  border-style: solid;
}
.note .footer {
  bottom: 0px;
}
.note .content {
  overflow-y: scroll;
  overflow-x:hidden;
  height:70px;
}

Upvotes: 0

The_DemoCorgin
The_DemoCorgin

Reputation: 744

Does the height of the note need to be set at 100px? You can set a height for the footer and then put a padding-bottom in the .note equal to the footer height to keep them from overlapping. I used 30px as an example and removed the fixed height. Try it here.

Upvotes: 0

David Moritz
David Moritz

Reputation: 92

Change your CSS to the following:

.note {
  position: relative;
  width: 40%;
  height: 100px;
  padding: 6px;
  margin-top: 10px;
  border-style: solid;
}
.note .footer {
  position: absolute;
  bottom: 0px;
  background-color:#fff;
  /* width:100%; */
}
.note .content {
  overflow-y: scroll;
  overflow-x:hidden;
  height:60%;
}

Upvotes: 0

Related Questions