Set the height of CSS3 to 100% full

I'm struggling to articulate my question, so please feel free to suggest a better title or guide me in the right direction.

I'm working on a website using a mix of HTML5 and CSS3, and I want it to display consistently across various browsers.

Here's what I have so far:

It looks good on Firefox 14.0.1, Chrome 21.0.1180.6, and Safari 5.1.7, thanks to some adjustments in the #contenido line height in the estilo.css file.

Below is a snippet of the CSS code:

html {height:100%;}
body {height:100%;}
div#Tabla {display:table; height:100%;}
div.row.main {display:table-row-group; height:auto; min-height:100%;}
div#main {display: table-cell; position: relative; height:auto; min-height:100%;}
div#contenido {display:inline-block; position: relative; 
               height:100%; min-height:100%; line-height:100%;}
section {height:auto; min-height:100%;}

When I change the position to absolute, the site looks the same on Chrome 21.0.1180.6, Safari 5.1.7, and Opera 12.

The issue arises in Opera and IE, where the #contenedor does not reach 100% height. Any suggestions on how to fix this?

I'm new to CSS and styling, so I may not fully understand the problem at hand.

Thank you for your help. :)

P.S. I realize I may have gone overboard with using CSS display:table, but that's where my research led me. Feel free to advise me to take a different approach (I'm already experimenting without tables, but haven't had much success).

htmlcssheight

Answer №1

Unfortunately, I couldn't stick to the original plan, but here is what I ended up doing instead.

CSS File:

body, html {border: 0px; margin: 0px; padding: 0px; 
height:100%; position:relative; width:100%;}
#head
{
 position:absolute;
 background-color: #98a;
 height: 100px;
 width:100%;
 top:0px;
}

#footer
{
 position:absolute;
 background-color: #e46;
 width:100%;
 height:20px;
 bottom:0px;
}

#content
{
 position:absolute;
 background-color: #dee;
 height:auto;
 top:100px;
 bottom:20px;
 width:100%;
}

body:

<body>

<div id="head">#head</div>
<div id="footer">#footer</div>
<div id="content">#content</div>

</body>

The most crucial aspect here is that the content is positioned absolutely with top and bottom. That's about it for now. Thanks for reading!

Answer №2

If you're looking for a workaround for Internet Explorer, consider using the min-height IE hack:

body, html {
  min-height:100%;
  height:auto !important;
  height:100%;
}

Give this a try and see if it solves your issue!

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

The background failed to display (potentially due to a hovering function)

I encountered an issue with a div that has a background image. Upon loading the page, the background image fails to display initially. However, when I hover over the div and then move my mouse elsewhere (due to a specific function described below), the bac ...

javascriptjqueryhtmlcssfrontend

What is the process for integrating three.js code manually into an iframe?

I recently posted a question on Stack Overflow inquiring about how to input code into an iframe without using a file or URL. While I was successful with simple cases like <h1>Hello World</h1>, my ultimate goal is to integrate three.js into thes ...

javascripthtmliframethree.js

Here is a guide on how to develop a PHP function that interacts with a textarea to display text in the specified color by using syntax like [color:red]

Is it possible to code a PHP function that can work alongside a textarea to display text in the specified color by using a syntax like [color:red]? This function operates in a similar manner to Facebook's @[profile_id:0] feature. ...

javascriptphpjqueryhtmlajax

Enhancing the layout of an ASP.NET master page with an HTML table that extends beyond the

My ASP.NET (VB) master page contains a table with 9 columns, each intended to hold textboxes. However, even without textboxes, the cells are extending beyond the content margins. How can I adjust them to fit within the master page margins? If they still ...

asp.nethtmlcssvb.netmaster-pages

Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...

jqueryasp.netcss

Stylish Responsive Design with HTML and CSS Centering

I am tasked with creating a landing page that features an image at the top with text, followed by a couple of videos and a 2-pixel strip line image that must stay at the bottom. <html> ... <body> <img src="topimage.png" alt="" /> <t ...

htmlcss

Easy steps to launch Excel application with an HTML button using a web browser

How can I create a button on an HTML page that will launch an Excel application when clicked by the user? <button class="btn btn-primary" onclick="window.open('excelApplication.url','_blank')">Launch Excel</button> ...

javascriptjqueryhtml

Issues arise with table-cell and table-row when implementing a navigation bar using the CSS table-layout property

Looking to create a dynamic navigation bar that adjusts to different screen sizes? On the left side, you want an undetermined number of links, while on the right side there should be a search button. The challenge is to ensure that all links have equal wi ...

htmlcss

What is preventing the conditional class in Svelte from being applied when the page loads?

Contextual Background In my exploration of Sveltekit, I set out to construct a dashboard using Bootstrap tab components. To achieve this, I opted to utilize <buttons> instead of <a> tags to prevent redirection to different routes. My goal was ...

htmlcssbootstrap-5sveltesveltekit

Stacking background images in CSS above other contained elements in a div

I've been experimenting with adjusting the z-index of elements in my code but haven't had any luck. Is it even possible to achieve what I want? Within a div element, I have set a background image using CSS. Inside this div, there are other eleme ...

htmlcssz-indexbackground-image

The correct terminology for divs, spans, paragraphs, images, anchor tags, table rows, table data, unordered lists, list

Just wondering, I've noticed that every time I come across a page element '<###>[content]<###>' and want to learn how to manipulate it, I usually search for something like "how to do x with div" or "how to get y from div". I know ...

javascripthtml

What is the best way to ensure that the question text will wrap onto a new line if it becomes too lengthy

I am currently working on developing ASP.NET MVC applications. However, I am facing a design issue with the HTML, CSS, and Bootstrap elements on one of my pages. The problem arises when Question 8 exceeds the border and does not wrap to a new line as inte ...

htmlcssasp.net-mvcbootstrap-4html-helper

organize divs in a nested angular style

Looking to showcase div elements in a specific layout within my Angular project: https://i.sstatic.net/RH0lF.png The current HTML structure is as follows: <div class="outer-wrapper"> <div class="image" ng-repeat="image in images" ng-if="sho ...

htmlcssangularjs

Mastering the placement of script tags in your Next.js application with Next Script

I'm in the process of integrating a third-party script into my Next.js website. This particular script adds an iframe right below its corresponding script tag. Therefore, it is crucial for me to have precise control over the placement of the script ta ...

javascripthtmlreactjsnext.js

The Hamburger Menu in the Bootstrap Navbar is failing to collapse

My website uses Bootstrap v5.3 and I've added a navbar, but the hamburger icon is not collapsing on mobile devices when clicked. Can someone please review my code to see if there are any issues? I can't figure out what's wrong. <!DOCTY ...

htmlcssbootstrap-5

Troubleshooting Bootstrap 5 Navbar Customization Problem: Vertical Display Instead of Horizontal Viewing

My current challenge involves customizing a Bootstrap 5 navbar to arrange three elements - a user avatar, a notifications panel, and a menu icon - in a horizontal layout. Despite my efforts, these elements are appearing in a vertical stack instead of horiz ...

cssbootstrap-5

Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications? I attempted to add a class called .not_complete to one of the timeline containers, but it ...

htmlcss

Creating uniform height for Definition Terms (DT) and Definition Descriptions (

Looking to creatively style a description list <dl> in a way that showcases two columns, even when there are multiple <dd>s following the <dt>. The challenge lies in wanting this design to be dynamic without resorting to floating the < ...

htmlcsslistheight

JS-powered menu links losing color after being clicked

I have a JavaScript rollover switch issue - when I click on the link, the color should stay orange (#f7931d), but it reverts back to grey. What am I missing in my code? CSS: #content-slider { padding-top:5px; height: 240px; width: 359px; ...

css

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Here are the steps to demonstrate this issue: 1. Visit the following page of the website: 2. Resize your browser window to mobile size and close the menu using the icon. After the animation finishes, the navigation items reappear. I have been struggling ...

csstwitter-bootstrap-3dotnetnuke