Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

I'm having trouble with aligning my sidebar vertically between the header and the bottom of the browser window. Currently, the bottom items are extending beyond the browser's bottom edge. How can I adjust this to ensure proper alignment?

Here is the HTML code:

<h1>
Header
</h1>
<div class="sidebar">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
  </ul>
</div>

And here is the CSS code:

.sidebar{
  background-color: orange;
  margin-left: 30px;
  height: 100vh;
  position: fixed;
  top: 0px;
}

.sidebar ul{
  height: 100%;
  list-style-type: none;
  padding: 0px 15px 0px 15px;
  margin:0px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
htmlcss

Answer №1

One way to organize a header and sidebar is by placing them inside another flexbox container. Here's an example you can check out

HTML

<div class="flex-container">
    <h1>
    Header
    </h1>
    <div class="sidebar">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
      </ul>
    </div>
</div>

CSS

.flex-container{
    display: flex;
    flex-direction: column;
}
.sidebar{
  flex: 1;
  display: inline-block;
  background-color: orange;
  margin-left: 30px;
  height: 100vh;
  top: 0px;
}

.sidebar ul{
  height: 100%;
  list-style-type: none;
  padding: 0px 15px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

Answer №2

Here is the final code I used for my project:

HTML:

<h1>
Header
</h1>
  <section>
    <div class="sidebar">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
      </ul>
    </div>
  <main>
    <p>main content</p>
    ... (more main content paragraphs) ...
  </main>
</section>

CSS:

body {
  display: flex;
  height: 100vh;
}
section {
  display: flex;
  flex-grow: 1;
}
main {
  background: #eee;
  position: absolute;
}
body, .sidebar, .sidebar ul {
  display: flex;
  flex-direction: column;
}
.sidebar ul {
  flex-grow: 1;
}
.sidebar{
  background-color: orange;
}
.sidebar ul{
  list-style-type: none;
  padding: 0px 15px 0px 15px;
  margin:0px;
  justify-content: space-around;
}

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

Creating a grid layout by designing boxes using CSS and HTML

I'm in the process of creating a homepage and I'd like it to resemble this design: (not the best quality, but the software I used was subpar (I miss mspaint)) Originally, I used buttons which made linking and customization easy, but I encounter ...

htmlcss

Is there a way to delete a stylesheet if I only have limited information about the url?

I am attempting to dynamically remove a CSS stylesheet using JavaScript or jQuery. I am aware that the target stylesheet is located within the 'head' element and includes the text 'civicrm.css', however, I do not possess the full URL o ...

javascriptjquerycss

When using jQuery, adding a class does not always trigger CSS animation

Currently facing a peculiar issue. I am utilizing jQuery to load articles from JSON and would like to dynamically add a class of 'animate' to each loaded element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( ' ...

javascriptjquerycsscss-animations

Error in WebGL rendering: attribs are not configured properly

Below is the code for my vertex shader: attribute vec3 aVertexPosition; attribute vec4 aVertexColor; attribute float type; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Positi ...

htmlopengl-esglslwebgl

Tips for incorporating a variable into an action link for HTML and Flask

I am completely new to using Flask and HTML. Currently, I am working on developing a user management tool that includes buttons to perform various actions within Flask. One of the functionalities I am trying to implement is a button that allows users to ...

pythonhtmlflask

What is the best way to manage the changing selection in a drop-down list?

Can someone help me with a coding issue I am facing? <select name="txtTK" > <option value="None">---</option> <option value="Mat">Materials</option> <option value="Cate">Category</option> <option ...

javascripthtmlajaxasp-classic

Discovering the page load times of web elements on a website with the help of Selenium WebDriver

On my HTML5 webpage, there are 4 charts that each take a different amount of time to load after the static content has already loaded. The loading process is indicated by a 'rendering' circle image for all 4 charts. I am looking for a way to dete ...

htmlselenium-webdriverwebpage-renderingresponse-timeqwebelement

Display a <button> element as a text hyperlink within a paragraph, ensuring proper wrapping and flow

I want to incorporate a link-styled <button> within a block of text while ensuring that it flows smoothly with the surrounding content. Although styling the button is straightforward and setting display: inline allows it to blend into the text flow, ...

htmlcssbutton

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

I'm in need of assistance on sorting a list of articles from an external json file based on their creation date. Can anyone provide guidance? Currently, I am fetching the data using AJAX and displaying only 6 results, but I'm facing difficulties ...

javascriptjqueryhtmljsonweb-deployment

Tips for setting up the information in a Bootstrap popover

I am currently working on a Google web app that involves Google Sheets data. My objective is to have the data displayed when hovering over a button, but instead, the data appears directly on the button without the hover display. What might I have done in ...

javascripthtmlcssbootstrap-4web-applications

Incorrect color change on button triggered by onMouse actions and state fluctuations

While creating a user profile on my app, I encountered an issue with button coloring. When I try to add color functionality to the button, it turns red instead of green and remains red even when the mouse is not hovering over it. My goal is to have the but ...

javascriptcssreactjsdom-events

rearrange the div elements by shifting each one into the one preceding it

Do you consider this a child and parent div relationship? <div class="container"> <p>content</p> </div> <div class="footer"><p>content</p></div> <div class="container"> <p>content</p> < ...

jqueryhtmlappend

jQuery Masonry now renders "row blocks" as opposed to trying to fit elements into place

Have you ever heard of the jQuery masonry plugin? It's a great tool for placing images in "blocks" instead of trying to squeeze them into empty spaces. Take a look at this explanation: But how can we minimize those pesky "voids"? HTML: <!-- This ...

jquerycssjquery-masonryjquery-isotope

Issues with script execution on Ajax tab

I'm currently using JQuery UI tabs to load content through Ajax. I have a situation where two tabs are supposed to load HTML content and execute a script to hide or show certain elements in the loaded content. However, I encountered an issue where the ...

jqueryhtmlajaxtabs

Tips for saving and editing a file with JavaScript

I need a website visitor to input text into a text area on my site. When they submit the form, I want the entered text to be saved in a .txt file located in the same directory as the current web page. I am unsure of how this can be accomplished, and if i ...

javascripthtmlfile

jQuery allows you to assign the identical function to multiple actions

I am faced with a situation where I have multiple actions that need to perform the same function. <ul> <li> <select id="s1"> <option>Name</option> <option>Year</option> ...

jqueryhtml

Elevate column to top position in mobile display with Bootstrap

I am currently working with Bootstrap column classes and have set up four columns as follows: <div class="col-md-3"> @include('schedulizer.classes-panel') @include('schedulizer.time-span-options-panel') @include(&apos ...

htmlcsstwitter-bootstrap

What is the best way to animate the preprending of a div in an AJAX response?

Here is the code I am currently working with: $.ajax({ type: 'POST', url: 'load_more.php', data: {val:myval}, success: function (data) { $("#load_current").prepend(data); ...

javascriptjqueryhtmlcssajax

There is a mismatch in the host name: please consider using a domain name (e.g., https://myname.myorg.com) instead of https://localhost

My current setup involves an HTML application that sends an AJAX request to a Qt C++ HTTP Server running on my local computer, hosted at "https://localhost:8081". However, I am facing an issue with a host name mismatch causing the AJAX request to fail. Is ...

htmlajaxqtsslhostname

Is it possible for an HTML checkbox value to store a boolean rather than a string?

Strings are held by HTML Input values. For instance: This stores the string "yes". <input type="checkbox" name="checkThis" value="yes"> Nevertheless, for checkboxes it is sometimes beneficial if the value was a boolea ...

htmlforms