Issue with Table Element's Full Width Within Parent Element

Here is a demonstration of the scenario in JSFiddle

I have made updates to the JSFiddle demonstration here: http://jsfiddle.net/x11joex11/r5spu85z/8/. This version provides more detailed insight into how the sticky footer functions well, albeit with a height issue.

The goal is for the table to occupy the remaining height on the page. However, it seems that setting height: 100% is not producing the desired effect?

Based on my experiments, it seems this issue is related to using min-height: 100%. I require this for the sticky footer functionality to work correctly.

Therefore, I am looking for an alternative method for achieving the sticky footer or a way to maintain 100% height for the elements involved.

HTML

<div class="wrapper">
  <div class="wrapper_content">
    <!--Header-->
    <div class="header">Header</div>
    <div class="content table">
      <div class="row">
        <div class="l_cell">left</div>
        <div class="r_cell">right</div>
      </div>
    </div>
    <div class="push"></div>
  </div>
</div>
<!--Footer-->
<div class="footer">Footer</div>

CSS

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

.wrapper {
    min-height: 100%;
    margin: 0 auto -50px;
    background-color: black;
}

.container {
}

.table {
    display: table;
    height: 100%;
    width: 100%;
    background-color: yellow;
}

.row {
    display: table-row;
}

.l_cell {
    display: table-cell;
    width: 265px;
    background-color: orange;
}

.r_cell {
    display: table-cell;
    background-color: purple;
}

.header {
    background-color: red;
    width: 100%;
}

.footer {
    height: 50px;
    background-color: green;
}

.push {
    height: 50px;
}

Answer №1

Here's a potential solution you can try: http://jsfiddle.net/7t4RT/

This issue has cropped up multiple times in the past. I suggest taking a look at some of the existing answers on StackOverflow for more insights.

The reason why using height: 100% doesn't work in your scenario is because there's no specific height defined. This leaves CSS questioning... how tall is 100% supposed to be? There are various techniques available in HTML and CSS to ensure elements fill their containers. Choose one that suits your requirements best.

Below is just one approach among many to tackle this problem:

HTML:

<div class="fill-height">
    <p>Filled</p>
</div>
<div class="cant-fill-height">
    <p>Not Filled</p>
</div>

CSS:

body {
    background-color: #ccc;
}

.fill-height {
    background-color: #0ff;
    width: 200px;    
    position: absolute;
    top: 0;
    bottom: 0;
}

.cant-fill-height {
    background-color: #ff0;
    width: 200px;
    height: 100%;
    margin-left: 200px;
}

Answer №2

I was able to find a solution to my issue temporarily, although it involves using display:table which may cause issues in the future. However, it is currently functioning as expected for creating the layout I had envisioned.

http://jsfiddle.net/x11joex11/r5spu85z/10/

CSS

body,html{margin:0;padding:0;height:100%;}
.wrapper{}
.table{
   height:100%;
   width:100%;
   display:table;
   background-color:yellow;
}
.row{display:table-row;}
.cell{display:table-cell;}
.footer{background-color:green;height:50px;}
.header{background-color:red;height:30px;}
.left{background-color:purple;}
.right{background-color:orange;}

HTML

<div class="wrapper table">
    <div class="header row">
        Header<br/>
        Header2
    </div>
    <div class="content table">
        <div class="row">
            <div class="cell left">leftt<br/>left2</div>
            <div class="cell right">right<br/>right2</div>
        </div>
    </div>
    <div class="footer row">
        Footer
        <br/>
        Footer2
    </div>
</div>

I am now seeking an alternative answer that does not rely on the use of display:table or table tags.

The sticky footer effect is still present.

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

Curious about the method of refining a list based on another list?

As a beginner in coding, I am facing a challenge in my code.org assignment. I need to filter songs by a specific artist from a dataset. Currently, I have code that randomly selects an artist, but I am struggling to filter out songs by that artist from the ...

Can you help me troubleshoot an issue I'm having with a basic HTTP-GET request to a Python script hosted on my

I recently came across a tutorial (Simple URL Example:Get Method section) that caught my interest. You can find the tutorial at this link: https://www.tutorialspoint.com/python/python_cgi_programming.htm After following the instructions in the tutorial, I ...

What is the best way to crop a background image for optimal lazy loading?

Just a quick query here - what's the best way to cut a background image for optimal lazy loading? I have an image that's 1920px wide and 5100px tall. I'm trying to figure out the best approach to cutting and loading it efficiently. Is my i ...

An unexpected error has occurred in the browser console: The character '@' is not valid

I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. How ...

Is there a way to retrieve data from two tables by linking the foreign key in one table to the primary key in another table?

I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...

Aptana Studio 3 fails to detect PHP code embedded within an .html file

When writing code, such as: <!DOCTYPE html> <html> <body> <?php echo "My first PHP script!"; ?> </body> </html> After <?php, I am encountering a red X icon error indicating that a ">" is missing at the end of t ...

AngularJS - How to Deactivate List Items

Currently, I am working on developing a breadcrumb navigation system using AngularJS. However, I am facing an issue where some of the links need to be disabled based on certain user requirements not being met. After researching the Angular documentation, ...

Adjusting AngularJS scroll position based on key presses

I am currently working on an autocomplete feature using AngularJS. I seem to be experiencing a problem with the scrollbar behavior. In the interactive gif provided, you can observe that the scrollbar remains stationary when navigating with the arrow keys. ...

What is the technique for creating a repeating image rather than stretching it?

Is there a way to repeat a background image to fit its content? I have a background image that needs to be repeated in this manner: https://i.sstatic.net/qVKkp.png However, when using the following code: .imgbord { background: url('https://i.imgur ...

Aligning the navigation links vertically

I am working on aligning my navigation bar vertically, even when I scroll the page. I found a method in another thread which suggests using the following CSS code for vertical alignment: #container { position: absolute; top: 50%; height: 400p ...

The placeholder is invisible

After thoroughly researching this topic, I am still stumped as to why my Placeholder is not appearing. I would greatly appreciate any insights or expertise you can provide to help me understand what I might be doing incorrectly. <input type="text" name ...

What is the best way to determine the value of margin-left in inline CSS using jQuery?

Here is the code snippet I am working with: <div class="ongoing" style="width: +728px; margin-left: +12480px"> I need to extract the value of the margin-left property for scrolling purposes. The technique I used to retrieve the width value does no ...

Blip of an image then vanishes

Within my web application, I have implemented code to display images and allow users to navigate through them using Next and Previous buttons. The functionality works as expected, but there is an issue where the image briefly flashes and then disappears wh ...

Using a series of identical divs to dynamically update the image URL

Greetings! I am a newcomer to the world of web development and I have decided to hone my skills by creating a small website for my mother! My goal is to replicate a specific div multiple times while changing only the image URL and the heading caption. < ...

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

Ensure that the buttons are arranged in a single row and have horizontal overflow in the mobile version

After using Bootstrap, I managed to create a row with multiple buttons. I encountered an issue where the buttons do not align properly when viewed on mobile devices, as depicted in the image provided. Is there a solution to ensure that these buttons alwa ...

Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations

I was under the impression that I had come up with a brilliant idea... I wanted to create a button with a hover effect where the background would do a wipe transition (top to bottom, left to right) using soft color transitions. My plan was to achieve this ...

What is the best way to retrieve data from a form on the server?

I'm currently working on a form and trying to figure out how to submit its contents to the server upon submission. I came across a similar question on another platform that suggested using a POST request, but I'm unsure of how to implement it. He ...

Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...

What could be causing the dropdown menu to not display below its container when the overflow:hidden CSS property is applied to the container element

One issue I'm facing is that the dropdown submenu of my navigation menu does not extend beyond its container element when displayed. My code includes main menu items (HOME, ABOUT, SERVICES, PRODUCTS, and CONTACT) along with submenu items (A, B, C, D, ...