Achieving a sidebar that remains full height with CSS

Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport.

JSFiddle Link

Here's the HTML:

  <div class='main-nav'>
    Site Name Editor
  </div>
  <div class='content'>
    <div class='sidebar'>
      Page Names
    </div>
    <div class='editor'>
      Option 1 <br>
      Option 2 <br>
    </div>
  </div>

CSS Code:

html, body {
  background-color: grey;
  margin: 0;
  heigth: 100%;
}
.main-nav {
  background-color: black;
  color: white;
  font-family: 'Noto Sans', sans-serif;
  font-size: 150%;
  heigth: 20px;
  margin: 0;
}
.content {
  position: absolute;
  width: 100%;
  heigth: 100%;
}
.sidebar {
  width: 15%;
  position: absolute;
  background-color: grey;
  border-right: 2px solid;
}
.editor {
  position: absolute;
  width: 84.5%;
  right: 0;
  background-color: grey;
}
htmlcss

Answer №1

If you wish to have the sidebar always visible on the side, simply set its CSS property to position:fixed:

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

Check out this demo

Answer №2

To achieve the desired output, apply the following CSS code:

.sidebar {
  width: 20%;
  position: fixed;
  background-color: lightgrey;
  border-right: 3px solid black;
  bottom: 0;
}

View the demo here: https://example.com/demo.

Answer №3

When it comes to information and modern browsers, consider using display:flex; as well.

By the way: You misspelled height as heigth

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(http://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}


    html, body {
      background-color: grey;
      margin: 0;
      width :100%;
      height:100%;
      flex-direction:column
    }
    body,.content {
     display:flex;
    }
    .main-nav {
      background-color: black;
      color: white;
      font-family: 'Noto Sans', sans-serif;
      font-size: 150%;
      margin: 0;
    }
    .content {
      flex:1;
    }
    .sidebar {
      width: 15%;
      background-color: grey;
      border-right: 2px solid;
    }
    .editor {
      flex:1; /* will use remaining space*/
      /*width: 84.5%;
      right: 0; useless here*/
      background-color: lightgrey;
    }
  
  <div class='main-nav'>
    Site Name Editor
  </div>
  <div class='content'>
    <div class='sidebar'>
      Page Names
    </div>
    <div class='editor'>
      Option 1 <br>
      Option 2 <br>
    </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

Developing a Jquery solution for creating radio buttons layout

Looking to create a radio button functionality within different groups using multiple select. For Group A: If the user selects A1, then it should automatically deselect A2 and A3. If the user selects A2, then it should automatically deselect A1 and A3. I ...

javascriptjqueryhtmlmultiple-select

Utilizing Shopify API to seamlessly add items to cart without any redirection for a smoother shopping experience

Looking for a solution to submit an add to cart POST request without any redirection at all? I have tried changing return_to to "back" but that still reloads the page, which is not ideal. My goal is to smoothly add the item to the cart and notify the cli ...

javascripthtmlajaxshopping-cartshopify

Presenting data in various formats

I've got a JSON file with a list of data that includes months and years. I want to display all the months, but have the year only appear once in a big block area. Here's an image example: https://i.stack.imgur.com/Ps3OF.png The image demonstrates ...

htmljsonangulardata-manipulation

Solving the right-to-left orientation issue in the Bootstrap navbar

I have implemented a navbar using the code below, which aligns well from the right side. However, the menu items are sorted in ltr order and I need them to be in rtl order, so that "Dropdown 1" starts from the right side of the page. Currently, it appears ...

htmlcssbootstrap-4

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

javascriptphphtml

Adjust the size of an image based on the smaller dimension utilizing CSS

Allowing users to upload images that are displayed in a square container in the UI presents challenges. The uploaded images can vary in size, aspect ratio, and orientation, but they should always fill the container and be centered. To address this issue, ...

cssimagedynamic

Tips for showcasing a search bar on Google search results

While browsing in Google, I came across websites that have a search bar displayed after their initial search result. This functionality allows users to easily search within the website as shown in the image below. I am intrigued and wondering how this can ...

html

Loading HTML content in a WPF WebBrowser without encountering security messages

Currently, I am developing a WPF application in which I create the content of an HTML file as a string (including some JavaScript functions for calculations). After generating the string, I save it as an HTML file on my local disk and then reload it using ...

javascriptc#htmlwpf

Displaying an error or success message upon submitting a form is currently not functioning as

I have implemented a registration/login system on my website, and currently, it shows errors and success messages at the top of the page. I want to display these messages under the form instead. However, every time I attempt to place them below the form, i ...

phphtmlforms

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

javascripthtmlcssreactjs

The issue of duplicate CSS arising during the compilation of SASS into a single CSS file with G

Just getting started with Stack Overflow and Gulp (using version 3.9.1). My goal is to compile all of my scss files into a single css file for my website. Here's what I have in my gulpfile so far: var gulp = require('gulp'); var sass = requ ...

csssassgulpgulp-sassgulp-concat

React Tabulator - custom header filter for select column - hide 'X' option

Is it possible to remove the 'x' option on header filters in react tabulator columns? The issue arises when users click the 'X' to clear a filter, as expected. However, if they then try to click on the same filter for another list item ...

cssreactjstabulator

Select the radio button by hovering the mouse over it

Is there a way to check my radio buttons when hovering over them without having to click? I want to display photos based on the selected radio button. I attempted this using JQuery, but I am still learning and consider myself a beginner. ...

jqueryhtmlcss

Problem with escaping special characters in random string HTML

As I was in the process of creating a JavaScript tool to generate random strings, with or without special characters, I stumbled upon an inspiring snippet that caught my attention: (): function randStr(len) { let s = ''; while (len--) s += ...

javascripthtmlrandomescaping

Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

I am attempting to use jQuery to add a hashtag (#) after the user types and presses space. I have created a demonstration on CodePen. In this demo, when you type something like (how are you), the JavaScript code will change it to (#how #are #you). To ach ...

javascriptjquerycssregexmobile

Switch up the linear gradient background periodically

Is there a way to change the background after a certain amount of time? It seems to work fine if the background color is just a solid color, but when it's a gradient as shown in the code below, the solution doesn't seem to work. Any suggestions f ...

javascriptjquerycsshtml

Elements floating in space, stretching across the entire width

In my design, I have a fixed size layout with a centered content container. My goal is to have the menu (home, about, contact, login) span 100% of the screen width. You can view the current setup in this jsfiddle: http://jsfiddle.net/Hxhc5/1/ I am aimin ...

csscss-float

Varying heights based on the screen size

Currently, I am in the process of designing my website and incorporating some wave elements to enhance the background. However, I've encountered some issues when resizing the screen. Specifically, the waves seem to shift with a space between them as t ...

javascripthtmlcss

Tips for creating a dynamic sidebar animation

I have recently delved into the world of web design and am eager to incorporate a sidebar into my project. While browsing through w3school, I came across a design that caught my eye, but I found myself struggling to grasp certain concepts like the 'a& ...

javascripthtmljquerycsssidebar

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

javascripthtmlcss