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

The value of the comment box with the ID $(CommentBoxId) is not being captured

When a user enters data in the comment box and clicks the corresponding submit button, I am successfully passing id, CompanyId, WorkId, and CommentBoxId to the code behind to update the record. However, I am encountering an issue as I also want to pass the ...

javascriptjqueryasp.nethtml

Ways to determine the types of props received by a function when the arguments vary for each scenario?

I have a specialized component that handles the majority of tasks for a specific operation. This component needs to invoke the onSubmit function received through props, depending on the type of the calling component. Below is an example code snippet show ...

javascriptreactjstypescript

Guide to testing Vuex Mutations with Vue-test-utils and Jest

I have reviewed a few tutorials on mocking and testing Vuex actions, but I have struggled to implement them successfully on my own. Despite following the steps outlined in the links provided, I consistently encountered an issue where toHaveBeenCalled would ...

javascriptunit-testingvue.jsjestjsvue-test-utils

How can you use jQuery to activate a specific tab?

I have 3 tabs with 3 different ids. $(document).ready(function() { $(function() { $( "#tabs" ).tabs(); }); $("#links > a").click(function() { var link = $(this).attr('href').substr(-1,1); console.log(link); $('#t ...

javascriptjqueryhtml

What is the best way to use jQuery to set the height of one div equal to another div

Edited: I am facing a situation with a 3-column layout - Column A, Column B, Column C. The height of Column A is dynamic and I need to set the same height for both Column B and C. For instance, Column A contains a tabbed panel with varying heights based ...

javascriptjqueryhtml

A guide on incorporating JSX file rendering in Flask

I am currently working on integrating React Contact form with MYSQL Workbench using Flask. I have set up the database initialization and model using SQLAlchemy, but I am encountering an issue with the render_template function. Is it possible to render th ...

javascriptpythonreactjsflask

Experimenting with a sample post on a minimalist Node.js application using Mocha and Superagent

I trust you are having a splendid day. Currently, I am focusing on enhancing my TDD skills in Node.js. To practice, I have developed a minimalistic application that handles basic GET and POST requests. The app simply displays a straightforward form to the ...

javascriptnode.jspostmocha.jssuperagent

How to disable JQuery accordion functionality?

Is there a method to effortlessly toggle between displaying content with an accordion format and without it? Essentially, can the styles and behaviors applied to my divs be reversed back to their original state before being "accordionized"? ...

jqueryjquery-ui-accordion

Distinguishing Response Headers in XMLHttpRequest and jQuery AJAX FunctionUniqueness:

Hello, I'm facing an issue that is not a duplicate. Here is the code snippet: var data = {'userId': window.cookie.get('userId'), 'sessionId': window.cookie.get('sessionId')} $.post(window.DbUrl + '/t ...

javascriptphpjquerynode.jsajax

Switch between class and slider photos

I am currently having an issue toggling the class. Here is the code I am working with: http://jsfiddle.net/h1x52v5b/2/ The problem arises when trying to remove a class from the first child of Ul. I initially set it up like this: var len=titles.length, ...

javascriptjquery

How to Target a Specific Element Using its Class with jQuery

Hey there! I'm currently working with the following snippet of HTML code: <li class="grey"> <div class="row"> <button id="test" style="width:50%;" class="btn btn-blue-white cartBtn">Add to Cart</button> </div ...

javascriptjqueryajax

Next JS restricts XLSX to return only 100 objects as an array of arrays

I've developed a file upload system that reads Excel files and uploads data to a database (using Mongoose). After implementing the code, I noticed that when I use console.log(sheetData), it returns an array of arrays with objects inside. Each internal ...

javascriptarraysexcelnext.jsxlsx

What is the best way to compare dates in order to obtain the necessary results?

Question : Filter the JSON array to retrieve specific entries 1: All entries with name "Sam". 2: All entries with date "Dec 2019". // JSON Data provided below. var data = [{ "id":"27", "0":{ "name":"Sam", "date":"2021-02-28" ...

javascriptnode.jsangular

ESLint only lints certain errors in the command-line interface

Incorporating eslint into my project has been a game-changer. Here's how my .eslintrc file is set up: // http://eslint.org/docs/rules { "parser": "babel-eslint", "env": { "browser": true, "node": true, "mocha": true }, "plugins": ...

javascriptnode.jsreactjsbabeljseslint

Vue-bootstrap spinbutton form with customizable parameters

I am in need of a custom formatter function for the b-form-spinbutton component that depends on my data. I want to pass an extra argument to the :formatter-fn property in the code snippet below, but it is not working as expected. <b-form-spinbutton :for ...

javascriptvue.jsvuejs2bootstrap-vue

What is the best way to run a function within an if statement without duplicating code if the condition is false?

When working with relay mutation code, I find it necessary to reload the store in order for it to sync with the database. This is because if the text being added is the same as previously added text, the relay store throws an error called flattenChildren.. ...

javascriptreactjsecmascript-6relayjs

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

css

Improving efficiency for handling a vast number of inputs in React applications

Dealing specifically with Material UI, I am faced with the challenge of rendering a large number of inputs (more than 100) while effectively managing global state. Performance issues arise when using the Material UI <TextField /> component, with noti ...

javascriptreactjsmaterial-uirecoiljs

Multi-line auto-suggest list with typeahead functionality

Currently, I am utilizing typeahead with Twitter Bootstrap and AngularJS. The autocomplete suggestions are displayed in a single line, as seen in the screenshot below. However, I would like to have the big cities' names displayed on separate lines. Fo ...

cssangularjstwitter-bootstrap

Adjusting the height of a jQuery Mobile collapsible post-expansion

My jQuery collapsible is not resizing properly to fit the expanded content. Below is an example of the collapsible structure: <div class="row collapsibles" data-role="collapsible"> <h1>Supercategory A</h1> <div class="col-xs-7 ...

jquerycssjquery-mobilejquery-mobile-collapsible