• 0

[XHTML/CSS] 100% DIV Heights


Question

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

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

* {
       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

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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Chrome is now faster than ever and Google explains how it did it by Sayan Sen Back in June last year, Google touted some great performance improvements for Chrome and shared a blog post explaining in detail how it managed to achieve them. Today, almost exactly a year later, the search giant is back again with another such post as it continues to make performance gains in its Chromium browser. Interestingly, Google is not the only one to make such claims in recent times. Microsoft also highlighted recently how Edge was getting significantly faster. Both Microsoft and Google have cited the Speedometer 3.0 benchmark to test. We recently measured browsing performance during our T-Force DDR5-7200 RAM review, also using Speedometer 3.0. In its blog post, Google says that the development team made significant improvements to memory management and caching. This includes some redesigning effort of the memory layouts for many internal data structures used in components such as DOM, CSS, layout, and painting. Google says that Blink, the rendering engine in Chromium, now "avoids a lot of useless churn" so as to make better use of the CPU caches. In the areas where memory handling previously relied on garbage collection in Oilpan, like the DOM (document object model), the team has expanded that by shifting from using malloc (memory allocation function) to Oilpan entirely. For those wondering, Olipan is the garbage collector in Blink. Some of the memory management and caching improvements Google made are fundamental to good code optimization. If you recall, recently, a senior Microsoft engineer also pointed out many of these issues in apps that slow Windows down. There are also improvements in handling strings within the renderer; the hashing method was updated to rapidhash, which is said to improve performance. For when rendering tasks become inherently expensive, such as computing CSS styles for various elements, Google adds that caching techniques have been enhanced to achieve higher cache hits and fewer misses.
    • Laptop users, this appears to be single-sided so it should fit even in cases with thin slots.
    • Apple wouldn't be what it is today without China either...
    • I am struggling with the game, after playing it again after so many years.... feels so out of space.
  • Recent Achievements

    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
    • Week One Done
      CHUNWEI earned a badge
      Week One Done
    • One Year In
      survivor303 earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      428
    2. 2
      +FloatingFatMan
      195
    3. 3
      snowy owl
      191
    4. 4
      ATLien_0
      184
    5. 5
      Xenon
      141
  • Tell a friend

    Love Neowin? Tell a friend!