Ensure that the left menu remains fixed at full page height of 100%

I'm currently working on developing a website layout that includes a left menu bar and right content section, both of which are independently scrollable.

However, I'm encountering a few challenges:

  • The left menu bar doesn't cover the entire width of the page when scrolling
  • The footer (subscription/contact) doesn't stay fixed at the bottom of the page upon vertical resizing

If anyone could offer some assistance or suggestions, it would be greatly appreciated!

View the code here

CSS: 

(CSS code here)

HTML:

(HTML code here)
htmlcss

Answer №1

To keep an element fixed on the screen, you can use position: fixed.

.sidebar {
    position: fixed;
}

Check out the code in action on Codepen: http://codepen.io/anon/pen/eNqwLN

Answer №2

If you want to fix this issue, consider applying the style position: fixed to your CSS rule for the .leftmenu class:

.leftmenu {
    position: fixed;
    height: 100%;
}

In order to properly align the main content alongside the sidebar, you should adjust the positioning by including left: 22% in the corresponding divs to ensure they match the width of the sidebar.

Answer №3

For the left menu, experiment with: position: sticky; width: 180px;

In the main content, consider using: margin-left: 220px

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 implementation of CSS in one React component has an impact on the functionality of the Ant Design Select component in

I've run into a puzzling issue where importing CSS styles in one React component is impacting the appearance of Ant Design's Select component in another component. Let me break down the scenario: The setup involves two React components, namely P ...

cssreactjsnext.jsantd

Sliding with jQuery to eliminate a div element

I wanted to dive into jQuery and decided to recreate the slick animation from Jay-Z's new album commercials. In these ads, a bar slides left over his name while simultaneously disappearing. I also wanted to add a flashing effect by fading out, fading ...

javascriptjqueryhtmlcss

Minimum width of Angular Material's mat-menu

I am looking to create a compact Material mat-menu using Angular 15. Below is the code I have: <mat-menu #flagMenu="matMenu"> <button mat-menu-item> <img src="assets/flags/en.png" class="flag"/> ...

cssangularangular-material

Extract data with Python Selenium

Can someone help me figure out how to extract the value "document sent" from the HTML code below using Python's Selenium library? I've tried the code snippet provided, but it returns None. print(driver.find_element_by_id('errorMessage' ...

pythonhtmlselenium

Error encountered when assigning a value to a session array in PHP 7.0

I am the author of this script <?php session_start(); if($_POST["num"] > $_SESSION["ratings"][$_POST["title"]]) $SESSION["ratings"][$_POST["title"]] = $_POST["num"]; ?> Although my syntax seems correct to me, the IDE is showin ...

phphtmlarraysif-statementsession-cookies

What is the best way to restrict the size of a table that is filled with data from a database?

Currently using a combination of React, Node, Express, and Postgres to populate a table with data retrieved from Postgres. The issue arises when the table becomes overly long, prompting the need to display only 5 rows at once while adding a scroll bar for ...

javascripthtmlcssreactjspostgresql

What is the best way to add a line break to a menu item?

Looking for some assistance with Angular Material here. I am trying to design a menu that includes an item with two lengthy paragraphs, but the text is getting truncated and only showing the first paragraph. If anyone could offer guidance or help, it woul ...

htmlcssangularangular-materialmenuitem

What causes an AJAX call to trigger both the success and error blocks each time it is made?

I'm having trouble with uploading an image to a database using AJAX. Every time I make the call, it enters both the success and error blocks. Here's my HTML: <div> <form id="test-form" enctype="multipart/form- ...

javahtmljqueryajax

The event handler is not being triggered when selecting the tag

Currently working on a project where I am utilizing vanilla HTML/CSS/JS. My goal is to hide all items on a page initially, set a default option in a select tag, display only the element with the selected ID, and allow the user to choose different time peri ...

javascripthtmlcss

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Having trouble with a Bootstrap HTML page featuring a video background? The issue is that sometimes the video has borders on the left and right, and occasionally on mobile devices as well. Oddly enough, when the browser (Chrome or Firefox) is refreshed, th ...

javascripthtmlcsstwitter-bootstraphtml5-video

Ways to extract information from a table cell located next to a table cell with colspan

As a beginner in web scraping, I am gradually making progress. However, I'm facing a tough challenge with this particular task. My goal is to extract data from the ESPN NBA boxscore website: I aim to scrape the names of players labeled as "DNP" (Did ...

pythonhtmlflaskweb-scrapingscreen-scraping

D3 not distinguishing between bars with identical data even when a key function is implemented

When attempting to create a Bar chart with mouseover and mouseout events on the bars using scaleBand(), I encountered an issue. After reviewing the solution here, which explains how ordinal scale treats repeated values as the same, I added a key to the dat ...

javascripthtmld3.js

Create a duplicate of the table and remove specific rows

Hi there, I have a query about duplicating a table. I am looking to extract specific results and display only those results. To illustrate, here is an example in HTML code: <table class="table table-striped" id="ProfileList2"> <tbody> ...

javascriptjqueryhtml

Why is Property CSS of Undefined Giving Error?

var random; var squareArray = [$('#square1'),$('#square2'),$('#square3'),$('#square4')]; var randomOrder = []; var i = 0; var j = 0; function computerPlays() { random = Math.floor(Math.random() * 4); randomO ...

javascriptjquerycss

Design a universal web service indicator akin to an "activity indicator" that works seamlessly across all web browsers

My web service is quite database-heavy (using PHP and mySQL), resulting in the user being faced with a blank screen for several seconds. When a user clicks a link on an HTML page, a javascript function is triggered, which then initiates an AJAX call to in ...

javascripthtmlcssajax

When adjusting the window size with the <ion-split-pane>, both the menu and router outlet disappear

When I have two ion menus and one main content (router outlet) and resize the page or switch to mobile view, the page appears blank as if the content is missing. Here is the code: <ion-app> <ion-split-pane> <ion-menu side="start" me ...

htmlcssangularionic-frameworkmenu

Exploring the wonders of Html5 Canvas with base64 encoded images

I have a base64 encoded image that looks like this: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCA...... Is there a way to draw this on a canvas using the encoded image provided above? Does anyone have an example of how to do this? Updated: ...

jqueryhtmlcanvas

Hide the menu when a user taps on an item on mobile or tablet devices

I'm facing a unique challenge and could use some guidance. The issue is with the mobile version of my website, accessible at . On tablets or mobile devices, the menu is condensed into a button. To navigate through the menu, I have to click the button ...

javascripthtmlcssmobile

Transforming the data from my Event Viewer into a sleek and functional HTML table

I am working on a command to extract Event Viewer data and display it in a more user-friendly format. My goal is to convert the output to an HTML table and save it to a text file for inclusion in an email report. Here is what I have so far: $endTime = Get- ...

htmlpowershellevent-viewer

An alternative to Socket.io tailored for up-to-date web browsers

Are there any specialized versions of Socket.io or similar libraries that cater to modern browsers exclusively, utilizing Websockets without the need for legacy browser support and outdated code? ...

javascripthtmlwebsocket