Member Avatar for MetalHobin

I am trying to make a layout for a website with a menu-navigation panel on the left, and the left with a content area. I know how to make blocks 100% height, and I know how to make them scroll, but here's where the trouble comes in, when I have the top row of my table layout a fixed height, and the lower row is set to %100, it adds the height to the net height and extends past the bottom of the screen. I've attached a picture to help visualize my problem.

I would like to make the blue area on top a fixed height, and the lower section extend no further than the bottom of the browser, and have the left and right parts both autoscroll when the content overflows.

hbase_scroll.png 65.39 KB
  • 2 Contributors
  • 3 Replies
  • 136 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for MidiMagic

For which sized screen and which browser?

That window is not always the same size. And the page designer can't know the size of that window when designing the page.

The height of the screen is irrelevant to web browser rendering. You cannot define things to be a certain percentage of the height of the browser window. The web doesn't work that way.

Web design is such that the display starts at the top, and expands downward as needed to render everything. This is necessary, because screen sizes vary from 640 x 480 px all the way up to 2560 x 2048 px. In addition, the user might be using a restored down window, instead of a maximized window.

So you can't design a page that exactly fills the screen. Such a design would work on only your computer, and a few others configured the same way your computer is configured. You have to make a general design that works on any resolution.

So you can use the following techniques to approximate a screenfull:

- Make the page scroll if the screen is too small for its contents.

- Leave enough space. Then when the browser window gets smaller (pixel-wise), the components can drift closer together.

- Design for the smallest resolution. Then the page can either expand into a bigger resolution, or have a blank space at the bottom.

Member Avatar for MetalHobin

As unsatisfactory as it is, I nonetheless thank you for the response.

The reason I thought that it was in fact possible to fill the screen is through websites like IBM's and Microsoft's that have an explorer-like feel to them.

Member Avatar for MidiMagic

Hit your restore-down button and see what those sites look like in a small window.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.