Achieve a full-height sidebar design similar to Wordpress using flexbox functionality

Working on a web app that features a tools sidebar with a fixed width requirement amidst fluid content.

Explored using flexbox to achieve this, but encountered an issue where the main box only takes the height of the viewport instead of the entire site's content. Here is what was attempted:

Link to Code Example

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Holy Grail</title>
        <style>
            * {
                <!-- Styling rules -->
            }

            html, body {
                <!-- CSS for html and body elements -->
            }

            article, aside {
                <!-- Specific styling for article and aside elements -->
            }

            <!-- Additional styles defined in the code snippet -->
        </style>
    </head>
    <body>
        <section class="main">
            <!-- Main content layout structure -->
        </section>
    </body>
</html>

An attempt was made at fixing the sidebar position, which did not yield the desired result resembling a Wordpress sidebar. Any recommendations or solutions would be greatly appreciated!

Answer №1

Your styles have been successfully corrected. The issue was that you had mistakenly used display: flex for the <body> tag, which was preventing it from expanding based on its content.

Important Update

To resolve this, I simply removed the following code:

body {
    display: flex;
    flex-direction: column;
}

Here is the Updated Snippet:

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>Holy Grail</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                border: 0;
                vertical-align: baseline;
                -webkit-tap-highlight-color: rgba(0,0,0,0);
                list-style: none;
                outline: 0;
            }

            html, body {
                width: 100%;
                height: 100%;
                font: normal 18px/120% Helvetica,Arial,sans-serif;
            }

            article, aside {
                padding: 0;
                margin: 0;
                border-radius: 0;
            }

            header, footer {
                height: 100px;
            }

            .main {
                display: flex;
                flex-direction: row;
                flex: 1;
                align-self: stretch;
                min-height: 100%;
            }

            article {
                flex: 5;
                background-color: #EEE;
            }

            aside {
                background-color: #333;
                flex: 1;
                color: #CCC;
                width: 360px;
            }

            .margin {
                padding: 25px;
            }

            h1 {
                margin-bottom: 25px;
                font-size: 24px;
                font-weight: bold;
            }

            p {
                margin-bottom: 14px;
                line-height: 140%;
            }
        </style>
    </head>
    <body>
        <section class="main">
            <aside>
                <div class="margin">
                    <h1>Aside</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit vero consequuntur natus ullam 
                    minus ipsum reiciendis error voluptas deserunt hic quae amet, similique repudiandae rerum nesciunt a 
                    aperiam doloribus! Rem quae, fugit quibusdam saepe!</p>
                </div>
            </aside>
            <article>
                <div class="margin">
                    <h1>Article</h1>
                     
                   <!-- Additional article content goes here -->
                   
                </div>
            </article>
        </section>
    </body>
</html>

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

Illuminate a corresponding regular expression within a text input

I currently have a functional code for testing regex, which highlights matching patterns. However, my challenge lies in highlighting the result within the same input as the test string. Below you will see the HTML and JavaScript snippets along with two ima ...

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

Dynamic row Material-UI input field

Is there a way to create a multiline TextField component that expands to take full height on different devices? I am familiar with fullWidth, but is there an equivalent for setting the height of the component to full on rows depending on the device it is ...

Find out the dimension of an object's width

I have a container that I want to slide in and out of view on the screen when a button is clicked. The challenge is that I do not want to set a specific width for the container as it may vary in size. I attempted to achieve this with the following code, ...

Is there a method to prompt the browser to retain form data when using the back button?

Having a puzzling problem. I've developed a sophisticated quote form for our company that utilizes ajax to display prices for products based on user input. There are 6 hidden fields set up as follows: productname1 productname2 productname3 and the ...

The production build encountered an issue as it was anticipating 3 arguments, however, it only received

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'elipsis' }) export class ElipsisPipe implements PipeTransform { transform(text, length, clamp) { text = text || ''; clamp = clamp || '...& ...

The CSS files undergo modifications when executing the command "npm run dev"

I've been working on an open-source project where I encountered a bug. Even when there are no images to display, the "Load More" button in the web browser extension still appears. To fix this, I decided to add the class `removeButton` to the button an ...

Magnific Popup displaying only the initial item

As someone new to using jQuery and Magnific Popup, I am working on a grid of images. When an image is clicked, I want Magnific Popup to display a specific div containing information relevant to that particular image. <div class="grid"> <div c ...

Dynamic Email Design

Currently, I am working on coding an HTML email that needs to be optimized for perfect rendering on all mobile devices. While I have expertise in coding emails for desktop and ensuring compatibility with various email clients and browsers, the challenge no ...

Ensure that all of the <li> elements within a <ul> container have equal widths

I've been grappling with this problem for the past day, and despite restarting from scratch multiple times, I can't seem to make a horizontal CSS flyout header function as intended. The dropdown section should expand to fit the content width (id ...

Bootstrap Modal closing problem

While working on a bootstrap modal, I encountered an issue where the modal contains two buttons - one for printing the content and another for closing the modal. Here is the code snippet for the modal in my aspx page: <div class="modal fade" id="myMod ...

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

Issues encountered while trying to style an unordered list using the table-cell property

I am having trouble formatting the "How it works" section on my website. When the text is too long, the numbers on the left side grow alongside it as shown in number 4. Is there a way to keep the numbers fixed on the left while allowing the text to expand ...

Disable a tab or menu item if the bean's boolean value is 'false'

I designed a home page with various menu/tab options that redirect the user when clicked, but only if they have access to that specific item. If access is not granted, the menu item becomes unclickable. While this functionality works, I am interested in en ...

Display everything when an option is clicked

I have a filter that is working perfectly. When I select a specific category, it filters out only rows with that category. However, I am stuck on how to display all rows again after clicking on the first option. My objective is to show all rows when "Categ ...

SyntaxError: Identifier was not expected

I am currently working on a function that involves a table of rows with edit buttons. Whenever the edit button is clicked, the following function is called and I encounter this error: Uncaught SyntaxError: Unexpected identifier The error seems to be poin ...

Incorporate a class into the fixed navigation menu using fullpage.js

I am attempting to modify the behavior of a sticky menu as the user scrolls down using fullpage.js. My goal is to have the #top-wrapper behave normally when the first section/page loads, and then add a class of is-fixed as you scroll down. When scrolling ...

PHP receive apostrophe from $_GET array

Similar Question: “slash before every quote” issue Hello there, I am currently attempting to utilize $_GET in order to transmit the contents of a text box to another php file. However, whenever I include single (') or double (") quote ...

Tips for changing color when hovering over elements in a CSS grid

I am currently attempting to incorporate a hover effect into this CSS grid, but I have not been successful in my efforts. I experimented with transition and opacity techniques, but they did not work as expected. Can someone please point out what I may be ...

Do you know the term for when JavaScript is utilized to display specific sections of a png image?

Imagine you have an image file in the format of a PNG which includes various icons intended for use on a website. How can JavaScript be utilized to choose and showcase a specific icon from that image? It's a technique I've observed in practice, b ...