Generate a scrollable element and adjust its dimensions to fit the window

Question

Generate a scrollable element and adjust its dimensions to fit the window

Currently, my webpage features a header at the top followed by a sidebar on the left and the main content area on the right. I am looking for a solution that will allow the main content area to scroll independently from the side bar.

-----------------------------------
| Header                          |
|---------------------------------|
|         |                       |
|         |                       |
| Left    | Main                  |
| Sidebar | Content               |
|         |                       |
|         |                       |
-----------------------------------

I have considered styling the main content with

{ height: 500px; overflow-y: auto; }

, but this approach does not guarantee that the set height will always align perfectly with the window size.

Does anyone know of a method that would enable the main content to dynamically adjust and utilize all available window space?

html css

Answer 1

Answer №1

If you want to create absolute positioning, you can achieve it by following these steps: http://jsfiddle.net/KpJgd/

#content{
    position:absolute;
    top:200px;
    right:0;
    bottom:0; /*this is the trick where the <div> goes til the bottom of the window*/
    width:70%;    
    overflow:auto;
    background-color:#008800;        
}

Remember to include the following in your CSS:

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
}

Answer 2

If you want to create absolute positioning, you can achieve it by following these steps: http://jsfiddle.net/KpJgd/

#content{
    position:absolute;
    top:200px;
    right:0;
    bottom:0; /*this is the trick where the <div> goes til the bottom of the window*/
    width:70%;    
    overflow:auto;
    background-color:#008800;        
}

Remember to include the following in your CSS:

html, body{
    width:100%;
    height:100%;
    overflow:hidden;
}

Generate a scrollable element and adjust its dimensions to fit the window

Answer №1

Similar questions

When attempting to redirect to a different page using setTimeout, the loading process appears to continue indefinitely

IE9 crashes when displaying elements with float:left style

Is there a way to verify the selection of all mandatory fields prior to concealing a div?

prevent parent jQuery functions from interfering with child function execution

The background hue does not cover the entire element

Guide on adding HTML to a specific div element in jQuery by utilizing the keyword "(this)"

on clicking GTM, obtain a different child element

Issue with JQuery causing maxlength input not to work

What is the best way to preload a font with a hashed filename and style hosted on a CDN?

Error with setting innerHTML property of a null nested div

Column on the far right of the grid with a frozen position

Considering the development of a web application similar to Canva

How to modify the background color of a <td> element using CSS and PHP

Using JavaScript to invoke Applescript commands

An error occured upon loading FullCalendar: Uncaught TypeError - Unable to read property 'push' as it is undefined

Uploading custom images with a WordPress widget

The console is showing an error message stating that the variable "i" is not

Preserve HTML element states upon refreshing the page

Measuring dimensions with HTML on the server - how to do it?

Tips for incorporating HTML code within a select option value?