Manipulating divs by positioning them at the top, left, right, bottom, and center to occupy the entire visible portion of the page

Many suggest avoiding the use of table layouts and opting for divs and CSS instead, which I am happy to embrace. Please forgive me for asking a basic question.

I am looking to create a layout where the center content stretches out to cover the entire visible page, allowing it to scroll if it exceeds the visible area. The top, left, right, and bottom divs should remain fixed in their positions on the visible page. Despite my attempts, I have been unable to achieve this desired effect.

Does anyone have any suggestions on how to approach this problem?

|--------------------------------|  <--- Visible page
|              Top                             | 
|--------------------------------|    Right/left fixed with stretched height
|------|  Center/content  |------|    Top/bottom fixed height stretched width
|------|                  |------|
|------|         ^        |------|
|------|         |        |------|
| Left |   <--stretch-->  | Right|
|------|         |        |------|
|------|         v        |------|
|------|                  |------|
|--------------------------------|
|             Bottom             | 
|--------------------------------|

Below is the base code without positioning for the div elements. I have tried various position properties like absolute, relative, etc., but encountered odd overflow issues with the top and bottom divs.

<body>
    <style>
        .container {
            border: 3px solid #FF00FF;
            width: 100%;
            height: 100%;
        }

        .top {
            background: red;
            height: 3em;
            width: 100%;
        }

        .bottom {
            background: blue;
            height: 3em;
            bottom: 0;
        }

        .left {
            background: green;
            width: 5em;
        }

        .right {
            background: gold;
            width: 5em;
        }

        .content {
            background: lightgreen;
            height: 100%;
            width: 100%;
        }            
    </style>

    <div class="container">
        <div class="top">
            Top
        </div>

        <div class="left">
            Left
        </div>

        <div class="content">
            Content
        </div>

        <div class="right">
            Right
        </div>
        <div class="bottom">
            Bottom
        </div>
    </div>           
</body>
javascriptjquerycsshtml

Answer №1

body {
 height:100%;
}
.container {
 position:relative;
 width: 100%;
 height: 100%;
}
.header {
 height: 50px;
 width: 100%;
 background: red;
}
.sidebar-left {
 position:absolute;
 top:50px;
 left:0;
 bottom:50px;
 width: 50px;
 background: green;
}
.sidebar-right {
 position:absolute;
 top:50px;
 right:0;
 bottom:50px;
 width: 50px;
 background: gold;
}
.footer {
 position:absolute;
 bottom:0;
 width: 100%;
 height: 50px;
 background: blue;
}
.main-content {
 position:absolute;
 top:50px;
 left:50px;
 right:50px;
 bottom:50px;
 background: lightgreen;
 overflow:scroll;
}

Check out a similar layout on JSFiddle

Note: Using percentage for height may not work if the parent element does not have an explicit height set...

Answer №2

Take a look at this code snippet:

<html>

<head>

</head>

<body>
    <style>
        .container {
            border: 3px solid #FF00FF;
            width: 100%;
            height: 100%;
        }

        .top {
            background: red;
            height: 3em;
            width: 100%;
        }

        .bottom {
            background: blue;
            height: 3em;
            bottom: 0;
            width:100%;
            float: left;
        }

        .left {
            background: green;
            width: 5em;
            float:left;
            height: 100%;           
            width: 10%;         
        }

        .right {
            background: gold;
            width: 5em;
            float:left;
            height: 100%;                       
            width: 10%;         
        }

        .content {
            background: lightgreen;
            height: 100%;
            width: 80%;
            float:left;
        }            
        

html, body {
    height:100%;
}

    </style>

    <div class="container">
        <div class="top">
            Top
        </div>

        <div class="left">
            Left
        </div>

        <div class="content">
            Content
        </div>

        <div class="right">
            Right
        </div>
        
        <div class="bottom">
            Bottom
        </div>
    </div>           
</body>-</body>

</html>

You can see the live demo on this page.

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

When running npx webpack, an error occurred stating, "Property 'minify' cannot be read from undefined."

I've been following the introductory tutorial on webpack from this particular link: https://webpack.js.org/guides/getting-started/ However, when I attempt to execute npx webpack, it encounters an error as shown below: ERROR in main.js from Terser Ty ...

javascriptwebpack

Problem with JQUERY Galleria CSS positioning alignment specifically in Firefox, Chrome works without issues

I recently incorporated jquery Galleria into my website and I am currently facing an alignment issue with the div element gallery-container. Interestingly, it appears correctly aligned in Chrome but is shifted to the right in Firefox. You can view the webs ...

jqueryhtmlcssjavascriptgalleria

What is the best way to convert an array of data into a dataset format in React Native?

Within my specific use case, I am seeking to reform the array structure prior to loading it into a line chart. In this context, the props received are as follows: const data = [26.727, 26.952, 12.132, 25.933, 12.151, 28.492, 12.134, 26.191] The objective ...

javascripttypescriptreact-native

Converting HTML into an image in a Node.js Buffer

Can you suggest a simple method to convert a raw HTML string, like the following: <b>Hello World</b> into a regular PNG image in Node.js Buffer form? I've been exploring various npm packages for a solution that supports this functionali ...

htmlnode.jsnpm

Click once to change the element, but it will remain changed and will not revert back no matter how many times you

After the first click displaying "X" and then changing to "O" in my tic-tac-toe JavaScript game, subsequent clicks only show "O", failing to switch back to "X". I am currently working on creating a tic-tac-toe game using JavaScript. Upon the first click, ...

javascripthtml

I'm looking to add multiple markers with multiple info windows using the Google Maps API. How can I achieve this?

Having trouble with the Google Maps API v3? I've set up a map with custom markers, but when clicked they all display the same content in the info window. Can you take a look at my code and help me troubleshoot? Each marker is supposed to link to a spe ...

javascriptgoogle-maps

The value of req.headers('Authorization') has not been defined

I'm experiencing difficulty with my code as the token is coming back as undefined. Here is the frontend section: export const fetchUser = async (token: any) => { const res = await axios.post('/user/getuser', { headers ...

javascriptreactjstypescript

Using Vite for creating a production build: A step-by-step guide

Just getting started with Vite and ready to take it into production. I'm wondering how I can create scripts (specifically for docker) to successfully run it in a production environment. The documentation strongly advises against using the preview mod ...

javascriptreactjsnpmyarnpkgvite

When the form is submitted, the text input vanishes and then the page is refreshed using AJAX technology

Can anyone help me troubleshoot why my page is reloading even though I used AJAX, and how to prevent it from clearing my input text after clicking the submit button? I tried using the show method to resolve this issue but it didn't work. <form met ...

javascriptphpjqueryajaxforms

Issue with bootstrap accordion not collapsing other open tabs automatically

I'm struggling to incorporate a Bootstrap accordion collapse feature into my project, specifically with the auto-collapsing functionality. In the scenario where there are 3 divs labeled A, B, and C, if A is open and I click on B, A should automaticall ...

csstwitter-bootstrap

Troubleshooting issue with the JQuery .change function not working in HTML <select>

I can't figure out why this code isn't working. It seems like it should be simple enough. Take a look at my drop-down menu code: <div> <form> <select id='yearDropdown'> <c:forEach var="year ...

javascriptjqueryselectdrop-down-menu

Execute multiple JavaScript files dynamically by utilizing the same npm run command

My directory structure: app Model user.js post.js Contents of my package.json file: "scripts": { "migrate": "node ./app/Model/" } I am looking to execute JavaScript files via command line in a dynamic manner. For example: npm run migr ...

javascriptnode.jsexpressnpm

Error: The term "Image" is unrecognizable

I'm in the process of creating a website where I want to display images via links. If the image is missing or only 1 pixel wide, I need the site to show an alternative image. My technology stack includes Jade/Pug and JS. Before rendering the links on ...

javascripthtmlimageconstructor

Understanding JavaScript's JSON Path Variables

I've scoured the internet for solutions to a similar issue but haven't been able to find any helpful information yet. My current challenge involves accessing a picture path (in JSON format) based on the material type of the selected element. Her ...

javascriptarraysjsonvariablespath

Interact with the button through Swipe Left and Right gestures

Is it possible to trigger a button click using JQuery or JavaScript when swiping left or right on two buttons like these? <button id="right" type="button">SWIPE RIGHT</button> <button id="left" type="button">SWIPE LEFT</button> If ...

javascriptphpjquery

a dedicated TypeScript interface for a particular JSON schema

I am pondering, how can I generate a TypeScript interface for JSON data like this: "Cities": { "NY": ["New York", [8000, 134]], "LA": ["Los Angeles", [4000, 97]], } I'm uncertain about how to handle these nested arrays and u ...

javascriptjsontypescriptinterface

Ensure YouTube iframe remains visible above all other elements on mobile devices at all times

Currently, my method involves utilizing YouTube for embedding videos and incorporating certain elements that should display on top of the video when clicked on. Regrettably, this functionality operates flawlessly on desktop browsers but encounters issues ...

htmlflashyoutubehtml5-video

Wrapping a list vertically with ASP.NET using a repeater for generation

I have a repeater that is creating a list of links in no particular order. I want the list to be displayed as follows: -Item1 -Item4 -Item2 -Item5 -Item3 Most solutions I've found require you to know the items in advance and set specific classes for ...

asp.netcsslistxhtmlrepeater

Triggering the onChangeMonthYear() event manually for jQuery datepicker

Currently, I am working with this function: $('#picker').datepicker({ // ... onSelect: function(currDate){ } }); I would like to manually trigger the onSelect() function, but using $('#picker').datepicker.onSelect(); does ...

jquerymethodsdatepicker

Get the MAC address of a client using Node.js

I have a project in progress that aims to help my home automation system recognize the presence of individuals at home by using their MAC addresses as identifiers. In my attempt to collect the MAC address of a client on my network, I utilized Nodejs along ...

javascriptnode.jsnpmautomation