• 0

[XHTML/CSS] 100% DIV Heights

Asked by JMann,

 Share

Question

Grand Master

JMann Veteran

Posted
  • Veteran
Posted

Hi everyone,

This may be a fairly basic question for people who have experienced this before, but I am having issues coding a template design that I have been given which has muiltiple sections of the site that contain DIVs set at 100% height.

The site is setup with a wrapper to align the template in the middle, and the wrapper is set to run down 100% of the pages height which seems to work fine. Next is a blue strip where the logo will be placed, which also needs to run down 100% of the site which worked fine when putting in 'min-height:100%;' as well. The next problem is that the content area, which needs to be placed to the right of the blue strip isn't able to scale to 100% height without putting in absolute positioning which messes everything up! It's at this point that I am stuck.

I have done some research, and found something a method called CSS Faux Columns but from what I have read I am not positive this solution would work for muiltiple DIVs set at 100% height - could someone tell me if this is the correct route to follow?

This site here is what I have created so far, any help with it would be appreciated.

Thanks

post-28082-12653656197195_thumb.png

Link to comment
https://www.neowin.net/forum/topic/872710-xhtmlcss-100-div-heights/
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Mentor

RoomKid

Posted
Posted

I'm not too sure if it'll work but try this:

height:auto !important;

height:100%;

min-height:100%;

Source: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Update, try adding this position:absolute; right: 0; to your #content area div.

  • 0
Grand Master

Cupcakes

Posted
Posted 

* {
       padding: 0;
       margin: 0;
       }
html, body {
       height: 100%;
       }
body {
       font-family: verdana, arial, helvetica, sans-serif;
       font-size: 95%;
       }
#container {
        width: 960px;
        min-height: 100%;
        margin: 0 auto;
        background: #000;
        }
* html #container {
       height: 100%;
       }

Also make sure that the parent of the element that you want 100% height, must also have a height applied to it.

Other resources:

http://www.cssplay.co.uk/layouts/layout

http://www.thefutureoftheweb.com/blog/100-percent-height-interface

http://www.realdesignnetwork.com/blog/archives/29

http://ago.tanfa.co.uk/css/layouts/css-3-column-layout-v1.html

  • 0
Mentor

Hot

Posted
Posted

To put it simply, only elements directly inside the document body can be assigned percentage-based heights.

Your #container height works because the block is the first descendant of the body naturally, and your #wrapper and #blue-stripe heights work because their position property is set to absolute, making them render as if they were directly inside the body (instead of inside their parent blocks). Your #content-area, on the other hand, is not directly inside of the document body. It is inside of #wrapper, and the browser does not know how to calculate a percentage-based height from that parent.

I have no idea why this limitation exists but that is how it works.

Your options are:

- Use Javascript to set the block heights on page load and window resize. (Terrible solution.)

- Further play with the position properties of blocks. (Also a terrible solution.)

- Re-code the layout in a way that makes your vertical green stripe the background of #container or <body>, thus making it run all the way down because those elements run all the way down. (The right solution.)

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • AMD thinks Ryzen Threadripper 9000 wipes the floor with Intel

      By Good Bot, Bad Bot · Posted

      Sounds like a good time to do a fresh install of Windows. WTF people...
    • Report: Trump's T1 Mobile off to a rocky start with messy pre-orders

      By Nick H. · Posted

      It only includes Russia. All other territories come at an additional cost of $20/pm/per territory you want to use it in.
    • From cars to cosmos: Honda's experimental rocket aces first landing test

      By zikalify · Posted

      From cars to cosmos: Honda's experimental rocket aces first landing test by Paul Hill Image via Honda Watch your back SpaceX, the Japanese company Honda has just performed a successful first launch of its experimental reusable rocket. The 6.3 meter rocket, which weighs 900kg, reached a modest altitude of 271.4 meters, but managed to land within 37cm of its target (1.2 feet), which is certainly pretty close. The rocket took off from a Honda facility in Taiki Town, Hokkaido, a growing space town in Japan. The flight time was also modest, coming in at just 56.6 seconds, but in that time, Honda was able to demonstrate key reusability technologies such as flight stability and landing capability. This marks a significant milestone for Honda’s space R&D department, which began work just four years ago. If you remember the tests SpaceX was performing around 2012 with Grasshopper, well Honda is at about the same stage with its reusable rocket. Why Honda is building rockets: Beyond cars and motorcycles Honda said that it wants to leverage core technologies it already works on for offering space services. It said that reusable rockets are a key part of sustainable space transportation. By 2029, the company wants to be able to perform suborbital launches, and while commercialization hasn’t been decided yet, it sees itself launching remote-sensing and wide-area communication satellites in the future. The Japanese car maker sees growing demand for satellite launches and wants to be involved by developing reusable rockets which could help it perform such launches economically. If it does end up finding customers, it will add more competition to the rocket launch sector. While the company hasn’t confirmed this, by developing its own launch system, it could eventually be in a position to launch its own satellites that could provide services to its cars to add value for customers. The competitive landscape and Japan's space ambitions Honda is just the latest company to join the growing list of companies trying to develop reusable rocket technology. The most famous companies doing this are SpaceX and Blue Origin, but there are also lots of other companies around the world also developing this technology. Honda is still taking baby steps compared to SpaceX, but it shows that the company is taking a focused, step-by-step approach, and achieving successes as noted by this launch. Hopefully, the company ends up providing tough competition against SpaceX, Blue Origin, and other companies so that it can help to drive down prices and spur on innovation.
    • Report: Trump's T1 Mobile off to a rocky start with messy pre-orders

      By +Nik Louch · Posted

      Does that subscription include international data roaming, inclusive of Russia?
    • Report: Trump's T1 Mobile off to a rocky start with messy pre-orders

      By Nick H. · Posted

      If you're stupid enough to try and get one, each and every headache along the way is on you. I can only hope that these roadblocks on a pre-order are enough to dissuade people.

  • Recent Achievements

    • Reacting Well
      pnajbar earned a badge
      Reacting Well
    • Week One Done
      TBithoney earned a badge
      Week One Done
    • First Post
      xuxlix earned a badge
      First Post
    • First Post
      Tomek Święcicki earned a badge
      First Post
    • One Year In
      carlitin86 earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      683
    2. 2
      ATLien_0
      290
    3. 3
      Michael Scrip
      228
    4. 4
      +FloatingFatMan
      194
    5. 5
      Steven P.
      145
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!