The sidebar is not automatically adjusting its height to match the height of the content

The initial appearance of the sidebar can be seen here: https://i.sstatic.net/epGgs.png

When the content fits the original page size, everything looks fine: https://i.sstatic.net/Sfxhb.png

However, once the columns are stacked on top of each other, the sidebar height remains unchanged, resulting in empty space at the bottom: https://i.sstatic.net/5siM4.png

The sidebar is contained within the wrap:

#wrap {width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0}
.sidebar {width: 200px; height: 100%; float: left; background: #65A973; position: relative; bottom: 0px}

Some HTML code here

    <div id='wrap'>
        <div class='sideBar'>
           //content goes here 
        </div>
        <div id='content'>
           //content goes here 
        </div>
        <div class='clear'></div>
    </div>
htmlcssresponsive-design

Answer №1

Here is how you can transform my suggestion into a formal answer:

To create a fixed sidebar using CSS, consider adding the following code:

#sidebar {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:[define your own width];
}

Ensure that you adjust the margin for the rest of your content to prevent it from being obscured by the sidebar:

#contents {
    margin-left:[sidebar width + regular margin];
}

Keep in mind that with this setup, scrolling within the sidebar will be disabled, while scrolling on the remainder of the page will remain functional.

Answer №2

Include the following attributes.

.sidebar{
  width: 200px;
  height: 100%;
  position:fixed;
  display:block;
  top: 0;
  }

Answer №3

If you're looking to create a column with 100% height that expands when the right column is tall, you may run into issues because the 100% height often refers to the viewport rather than the actual div height.

To solve this problem, you can use position:absolute in the left column and add padded content for correct alignment.

Check out an example here: https://jsfiddle.net/2zes2ewL/

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

Displaying content on a click event in AngularJS

I am facing an issue with the ng-show directive not working as expected when a user clicks on an icon. The desired behavior is that the parent div should initially display content, but when the play icon is clicked, the contents of the div should become ...

javascripthtmlangularjs

Protecting client-side game logic operations with web application security

I've been developing a web-based game that utilizes the Canvas feature of HTML5. However, I've come to realize that there is a significant vulnerability in my system. The scoring and gameplay statistics are currently being calculated on the clien ...

javascriptajaxhtmlsecurity

What could be causing my col-x to not function correctly in Bootstrap?

I am trying to modify my Bootstrap navbar by adding a Login button, but I encountered an issue. When I use col-x classes inside the navbar to separate elements equally, they only cover 50% of the width and no more. However, using col-x classes outside the ...

htmlcsstwitter-bootstrapbootstrap-4

Upon page load, a dazzling SVG file will flicker before being adorned with CSS styles

I'm experiencing an issue with an SVG arrow icon on my webpage that flashes quickly across the entire screen upon page load before settling into its proper size and placement. I've tried using CSS to initially hide the icon and then reveal it aft ...

javascriptjqueryhtmlcss

The moving background is not remaining still

Hi everyone, I'm currently in the process of creating a new background design for my website and I want to add some animation to it. You can view my progress here: One issue I am facing is that the "background" div does not remain fixed when scrollin ...

javascriptjqueryhtmlcssjquery-plugins

How can the color of the wishlist icon be modified in Reactjs when the item is available in the database?

Is there a way to change the color of the wishlist icon based on whether the item is in the database? If the item is present, its color should be brown, and if it's not present, the color should be black. Additionally, I want the ability to toggle be ...

javascriptcssreactjs

Discrepancy discovered in Bootstrap 5 container dimensions compared to provided documentation

I am currently delving into Bootstrap 5 (I have some experience with coding but not much with web technologies). To better understand how Bootstrap works, I've been creating HTML documents to experiment with its behavior. While working on the "conta ...

javascripthtmlwebbootstrap-5

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

I've been struggling to center the MatIcon in the MatButtonToggle, trying multiple methods without success. It may seem like a minor issue, but it's causing quite a bit of trouble for me. Can someone please guide me on how to make this adjustment ...

cssangulartypescriptsassangular-material

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

javascripthtmlcsssvg

The navigation bar logo on my website has mysteriously vanished

Even though my main website is built with Wordpress, I decided to start a blog using Tumblr. You can visit my website here: And here is my blog: I tried to replicate the same structure of my website on my Tumblr theme. However, I encountered an issue w ...

htmlcsswordpressimagetumblr

Adjust the horizontal position of a span element from left to right based on its class

Welcome to my first question here, with many more to come in the future. I have an issue with positioning that I'm not sure is possible to solve. The problem arises with an unordered list (<ul>) containing floated <li> elements. For the m ...

phphtmlcsscss-position

I'm curious if there is a specific regex pattern that can be used for validating custom page ranges in JavaScript

I'm in need of a regular expression for page sequences that should match: 1 1, 4-5 1, 4-5, 8, 11, 13-14 but should not match: 1,,,, 1, 4-5- 1, 4--------2233-----,,,, I've experimented with the following patterns but they haven't been su ...

javascripthtmlreactjsregexfrontend

Attach a 20% image to the top that remains visible while scrolling

I am working with a Bootstrap Modal Window that includes: An image and a scrollable list of comments related to the image (scrollable with overflow:auto). The Modal window also contains an Add comment Textarea at the bottom. I am looking to implement th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Implementing jQuery to enable the selection of multiple options depending on user input

Assume that when the people input value is 1, then the options for values 1 and 2 will be selectable. However, if the people value is greater than 1, then all other options will become selectable. Is it feasible to enable multiple select options based on ...

jqueryhtmlformsinput

A div element featuring a border with transparent edges on the top right and bottom left corners

Does anyone know how to code the border for the upper right corner and lower left corner of the box (as shown in the image below)? I would really appreciate some help. Thank you in advance! This is the HTML <div class="carouselle"> <div clas ...

htmlcssbordercss-shapes

How can I attach an eventListener to a specific HTML page only?

I am facing a challenge with adding an eventListener to only one specific HTML page out of several pages in my project. document.addEventListener('scroll', function(e){ // I want the img's opacity to change as the page is scrolled. }); ...

javascriptjqueryhtml

Encountering a database deletion error with Spring Boot Thymeleaf

I'm currently facing an issue where I am attempting to remove an entry from my database. However, when I try to delete it on my html page, I end up being redirected to an error page instead of the intended destination. The entry I am trying to delete ...

javahtmlspring-bootthymeleafcrud

My confusion is running high when it comes to navigating the mobile version of my website

Creating a navigation bar for my website has been challenging. Whenever I switch to mobile view, the list in my navigation bar shifts 40px to the right side of the screen where there's nothing. Is there any way you can assist me with this issue? ...

htmlcss

Elevate the visual impact of a photo by adjusting its opacity

Looking to implement an image highlight effect when hovering over it? One approach is to reduce the opacity of the surrounding images while keeping the hovered image fully visible. If you've tried the code snippet below and encountered some issues, le ...

htmlcss