Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

In the development of a web application, I am utilizing FlexBox for layout design. It is important to note that I am opting for pure flexbox CSS rather than incorporating Bootstrap.

Desired Layout Structure:

Row1: Consists of a fixed header 64px in height. Row2: Divided into a fixed sidenav of 250px on the left side and a fixed content section occupying the remaining space on the right side.

<div id="row1">
     <div class="header"></div>
</div>
<div id="row2">
     <div class="sidenav"></div>
     <div class="main-content"></div>
</div>

Note: Both the sidenav and main-content should expand to fill 100% of the screen width with their own scroll bars. The browser's default scroll bar should remain hidden both vertically and horizontally.

javascripthtmlcssflexbox

Answer №1

I propose to make the body element a flex container with a column layout and a height of 100vh. Then, I suggest setting the #row2 element to grow as needed and applying overflow-y: scroll to both the .sidenav and .main-content sections.

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#row2 {
  display: flex;
  flex: 1 0 0;
}
.header {
  height: 64px;
}
.sidenav {
  flex: 0 0 250px;
}
.main-content {
  flex: 1 0 0;
}
.sidenav, .main-content {
  overflow-y: scroll;
}
<div id="row1">
     <div class="header">header</div>
</div>
<div id="row2">
     <div class="sidenav">foo<br>foo<br>...</div>
     <div class="main-content">foo<br>foo<br>...</div>
</div>

Answer №2

Below is an example that utilizes the power of flexbox:

body,
html {
  height: 100%;
  margin: 0
}

#row1 {
  display: flex;
  height: 64px;
  background: red;
  position: fixed;
  width: 100%;
}

#row2 {
  display: flex;
  top: 64px;
  position: relative;
  height: calc(100% - 64px);
  width: 100%
}

.sidenav {
  position: fixed;
  width: 250px;
  height: calc(100% - 64px);
  background: green;
  overflow-y: scroll
}

.main-content {
  flex: 1;
  background: blue;
  overflow-y: scroll
}
<div id="row1">
  <div class="header"></div>
</div>
<div id="row2">
  <div class="sidenav">lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text
    lipsum text lipsum text lipsum text...
   (content shortened for brevity)
    ...text lipsum text lipsum text lipsum text </div>
  <div class="main-content">lipsum text lipsum text lipsum text...
   (content shortened for brevity)
    ...text lipsum text lipsum text lipsum text lipsum text lipsum text lipsum text </div>
</div>

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

Executing a class function within the ajax success method

I am attempting to set a variable inside the success callback of an AJAX call. I understand that in order to assign the value, I need to use a callback function. However, I want that function to be within the class. Is it feasible to implement something li ...

javascriptajax

Retrieving the initial entry from a JavaScript ES2015 Map

I am working with a Map structured as follows: const m = new Map(); m.set('key1', {}) . m.set('keyN' {}) The Map may contain one or multiple items. I am wondering if there is a way to retrieve the first item by index, without using m. ...

javascriptdictionaryecmascript-6

Link-defying button

I'm developing a website with a homepage that serves as an entry point to the rest of the site (it welcomes the user and allows them to click anywhere to access the main website). The following code accomplishes this: <template> <div onc ...

javascripthtmlcssvue.js

Using express.js to send multiple post requests to the same url

My website features a login form where users input their information. Upon submission, a post request is made to check the validity of the provided information. If successful, users are redirected back to the login form where they must enter the code sent ...

javascriptnode.jsexpresspost

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component

I am attempting to use custom SVG icons in place of the default icons from Material UI's Pagination component (V4). However, I keep encountering this console error: Material-UI: The component prop provided to ButtonBase is invalid. Please ensure tha ...

javascriptreactjstypescriptsvgmaterial-ui

div containing various images of varying sizes

I am working with a layout that requires 4 images to be displayed together within a container. One image should be larger and positioned on the left, while the other three should be uniform in size and placed next to it on the right. Despite my efforts t ...

htmlcss

Unfulfilled commitment on bcrypt

I am currently facing an issue while trying to validate a user's password using bcryptjs. I have implemented a function that returns a Promise, but I am encountering an error when reaching the bycrypt.hash step - all I see is Promise { <pending> ...

javascriptexpressbcrypt

What is the process for converting the output of cryptoJS.sha256 to binary in a Postman pre-request script?

Seeking assistance in creating an HMAC signature using a pre-request script in Postman. While troubleshooting, it has become apparent that there is an issue with the signature generation process. Although a proof of concept example provides expected result ...

javascriptcryptographypostmanhmac

Issues with utilizing destructuring on props within React JS storybooks

I seem to be encountering an issue with destructuring my props in the context of writing a storybook for a story. It feels like there may be a mistake in my approach to destructuring. Below is the code snippet for my component: export function WrapTitle({ ...

javascriptreactjstypescriptecmascript-6

Bootstrap navbar partially collapsed with inner items concealed not at the edges

Many discussions have come up regarding partially collapsing Bootstrap navbars, such as: Item1 Item2 Item3 Item4 Item5 Is it possible to achieve the following collapsed format: Item1 Item2 Item3 =menu= Or: =menu= Item3 Item4 Item5 This method ...

htmlcsstwitter-bootstrapbootstrap-5

Encountering the "Not all code paths return a value" TypeScript error when attempting to manipulate a response before returning it, however, returning the response directly works without any issues

Encountering an issue where manipulating/process response and return triggers an error in TypeScript with the message "Not all code paths return a value.". Data is fetched from a backend API using RxJS lastValueFrom operator, along with lodash functions as ...

javascriptangulartypescriptasync-awaitrxjs

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

javascripthtmlcssdrop-down-menu

Exploring Ember Octane (version 3.22 and above): benefits of using {{on 'click' this.function}} over traditional onclick={{this.function}} method

When working with Ember Octane, there are two different ways to attach a function to an event in an hbs file. The first way is the EmberJS approach: {{on 'click' this.function}} Alternatively, you can use the classic HTML method: onclick={{this ...

javascripthtmlember.jsember-octane

Excluding certain source files in Typescript's tsconfig is a common practice to

My attempt to configure Typescript to exclude specific files during compilation is not working as expected. Despite setting exclusions in my tsconfig.json file, the code from one of the excluded files (subClassA.ts) is still being included in the compiled ...

javascripttypescripttsconfigtranspiler

File download is initiated through an Ajax response

Utilizing Polymer's iron-ajax element, I am making an XMLHTTPRequest to a server endpoint: <iron-ajax id="ajax" method="POST" url="/export/" params='' handle-as="json" on-response="handleResponse" </iron-ajax> The resp ...

javascriptajaxexpresspolymerkoa

Click on the React JS infinite render component to load more items

Just diving into the world of react/next and I'm a bit stuck on this issue. I've searched high and low, tried different solutions, but I can't seem to figure out what I'm missing or not grasping here. I understand that loadStats() is ...

javascriptreactjsnext.js

Error encountered in Next.js when defining columns for a MUI data grid

Currently, I am integrating MUI Data Grid into a Next.js app under development. While attempting to define a more intricate column structure, I encountered an error: { field: 'home_address', valueGetter: (value, row) => { retur ...

javascriptreactjsnext.jsmaterial-uimui-x

An easy way to place text along the border of an input field in a React JS application using CSS

I am struggling to figure out how to create an input box with text on the border like the one shown in the image below using CSS. I have searched extensively but have not been able to find any solutions to achieve this effect. I attempted using <input&g ...

javascriptcssreactjs

Utilizing document.write() for displaying markup content

I have an inline SVG stored as a variable on my webpage and I am making some changes to it. How can I display viewText on the page (not the SVG image) with the modifications? What is the best way to make viewText appear on the page? For instance: ...

javascriptjqueryhtml

What is the best choice for the navigation menu: using `<ul>` or `<div>`?

Is it considered unprofessional to construct a navigation menu without utilizing unordered list tags? For instance, opting for <div> elements instead. <div class="navbar"> <a href="#"> Home </a> </div> ...

htmlcss