Sticky footer with overlapping DIV

I am working on a container with three nested divs: header, content, and footer

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

The footer always stays at the bottom of the main container. Some CSS for this layout:

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

The middle div is used for text input. The issue arises when there is too much text causing it to overlap the footer. I need the middle div to be scrollable without overlapping the footer. Setting a fixed height for the middle div is not an option because the parent div may be resizable. Is there any way to achieve this?

You can view a working example here: http://plnkr.co/edit/Jhsn9EziMLs6IUCUg2ah?p=preview

htmlcss

Answer №1

Let's start by addressing a crucial element:

The absolute positioning on the footer should be removed.

position: absolute;

By using absolute positioning, the footer is taken 'outside' of the normal document flow. This means that as your content expands, the footer will consistently appear to 'overlap' with the content.

Instead, opt for 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 provided code snippet, you can adjust the height of the content and notice that the footer remains at the bottom of the page regardless of the content's 'size.'

Additionally, it is recommended to include a min-height property in the content div to ensure the footer consistently appears at the bottom of the screen. Just wanted to share this valuable tip!

Refer to this demo -> http://jsfiddle.net/9dUJY/

I hope you find this information helpful!!!

Answer №2

To update your CSS, make the following adjustments:

.reminder {
  position: absolute;
  width: 50%;
  height: 120px;
  padding: 8px;
  margin-top: 15px;
  border-style: dashed;
}
.reminder .footer {
  position: relative;
  bottom: 0px;
  background-color:#fff;
  /* width:100%; */
}
.reminder .content {
  overflow-y: auto;
  overflow-x:hidden;
  height:70%;
}

Answer №3

Is it necessary to specify the height of the note as 100px? An alternative approach could be to set a height for the footer and then add a padding-bottom in the .note class equal to the footer height to prevent them from overlapping. In this case, I used 30px as a reference point and eliminated the fixed height specification. Feel free to test it out here.

Answer №4

Your content currently lacks a defined height and scroll functionality is not enabled. Adding scroll to a 100px tall container may lead to usability issues in the future.

Check out the updated version here

Make sure to consider browser compatibility, especially if you are working with modern browsers only. It seems that IE8 is supported for this setup.

Refer to MDN Docs for more information

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to bold a specific word within a div on react native

Hey there! I'm working with the code below: getDescription = () => { return( <div className="Description">{this.props.mytext + ': ' + this.name} </div> ) } Is it possible to bold only the specific te ...

cssreactjsreact-native

Tips for centering content in the middle of a line

How can I center align 3 buttons on a line using CSS and HTML? This is what I have tried so far: 1/ CSS : .center-buttons { display: flex; justify-content: center; } .button { margin: 0 10px; } 2/ HTML: <div class="row"> <di ...

htmlcsstwitter-bootstrapbootstrap-4

When hovering over the menu list, the background-color of the text area remains the same

I am facing an issue with my list menu. The hover effect changes the background color only in the box area, but not in the text area. I would like to figure out a way to make both areas change color on hover: Here is the code snippet: <div class="se ...

csslistmenubackgroundhover

Achieving Bottom or Center Alignment for a Div within Another Div Using Bootstrap 5

I've been struggling to position my Title and CTA Button at the bottom (or center) of the main image div. I'm using Bootstrap 5.1 and have tried various d-flex methods without success. You can view my code on jsfiddle. Thank you in advance for a ...

htmlcsstwitter-bootstrapbootstrap-5

Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Currently, I have a mat-select dropdown icon arrow that toggles facing up or down based on user clicks. However, after selecting an option and closing the dropdown, the arrow remains in the upward position unless further clicked and held. I have attempted ...

javascriptcssangularsassangular8

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

androidapihtml

Showing today's date using PHP

As a Java developer who has primarily worked with Java for an extensive period of time, I recently came across a code written in PHP by a friend. This code required the usage of a remote web-service to retrieve a field named "dateAdded". My task was to mod ...

javaphphtmldatewamp

Prevent the Stop Button from triggering submission and then utilize JavaScript to submit the form

I have a global delete button utilized in various sections of my site. Below is the code snippet for reference. public function delete_button($id_to_be_deleted, $form_to_post_to, $button_name){ return form_open($form_to_post_to, array('class&apos ...

javascriptphpjqueryhtmlforms

Slideshow Display Suddenly Halts at the Last Image

I am currently working on a Bootstrap JS Carousel that showcases several images stored in the project folder. Each image's filepath is retrieved from an SQL Server database and displayed within the carousel. While the images are displaying correctly ...

javascriptc#jqueryhtmlasp.net

The first-child and last-child selectors are not working properly in the CSS

In the family of elements, the first child should proudly show off the image icon for home while the last child remains humble without any background imagery: Check out the evidence here: http://jsfiddle.net/gUqC2/ The issue at hand is that the first chi ...

css

Is the side tab overflowing the window due to its absolute positioning?

My browser window has a side tab that slides in when clicked using jQuery. The issue I'm facing is that the tab overflows the body due to its absolute positioning. However, the overflow stops when the tab is pulled in by jQuery. It only happens when t ...

javascriptjqueryhtmlcss

Using jQuery functions on inputs within a Bootstrap Modal

I've encountered an issue with my jQuery functions that validate input fields based on a regex pattern. Everything works smoothly when the form is displayed on a regular page, but as soon as I try to implement it within a Bootstrap Modal, the validati ...

javascriptjqueryhtmltwitter-bootstrapmodal-dialog

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js

Reveal concealed content when a responsive table becomes scrollable on a mobile device

I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...

javascriptjqueryhtmlcsshtml-table

Different methods for incorporating script-specific data into markup

How can we include extra meta data in HTML code to support client-side javascript functionality? Let's consider some straightforward examples: A list of contacts that, when clicked, displays their location on a map. For instance, how can we link la ...

javascriptjqueryhtmljson

How to Implement Transition Effect for Height Changes on v-if in Vuejs

I have a code snippet that effectively animates a v-if element by reducing its height to 0px. The animation is working well, but the issue arises when I need to specify the initial height of the element in CSS. While this is fine for a single element, I ...

cssanimationvuejs2vue.js

Is there a way to arrange the outcomes in a single line?

I need help displaying my results in three rows side by side in React/JavaScript using flexbox. Since I only have one CardItem, I can't just copy and paste it three times as it would show the same result in each row. Is there a way to achieve this wit ...

htmlcssreactjsreact-nativeflexbox

Tips for dynamically adding an external SVG animation to your website:

When trying to insert an animated SVG using jQuery or plain JavaScript, they appear static in Chrome and Edge, but display correctly in Firefox: $(".loader").prepend("<svg><use xlink:href='/images/icons.svg#loading-ring'></use> ...

javascriptjqueryhtmlsvg

Stop jQuery popups from wrapping text when resizing the browser window

Whenever a link is clicked, a jQuery popup appears. The popup functions properly in terms of opening and closing, but I would like to ensure that its position remains fixed when resizing the browser window to avoid any wrapping issues. Typically, I use a ...

javascriptjqueryhtmlcss

Tips for visually conveying the values of x and y using SVG symbols

I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these ...

htmlcsssvg