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

The translateX property will be set to the offsetX value of the event when the mouse is moved, resulting in a

Here's a quick and easy question regarding some kind of scrubber tool. Check out the fiddle below. When using jQuery to bind to the mousemove event and adjusting the transformX property in the positive direction, there's a 50% chance it will ret ...

javascriptjqueryhtmleventsmouseevent

Managing errors within AngularJS in your controller.js file

In my NodeJS + AngularJS single page application, there are fields for inputting text. I need to create a function in controller.js to check if any of the fields are empty so that an error alert can be displayed in the browser. This is my controller.js fi ...

htmlangularjsnode.js

Every key must be a string or number; received a function instead

I encountered a peculiar situation while working with Cucumber: Scenario Outline: Protractor and Cucumber Test InValid Given I have already...... When I fill the <number> .... Examples: | number|... | 3 |... |4 |... Moreover, I ...

javascripthtmlangularcucumberjs

Having trouble accessing an element using jQuery(idOfElement) with a variable as the name parameter

Possible Duplicate: Issue with JavaScript accessing JSF component using ID Whenever I attempt to retrieve an element by passing a variable in jQuery(idOfElement), it doesn't work. But if I use something like jQuery('#e'), it works perfe ...

javascriptjqueryhtml

Stylish Sudoku Grid Design with CSS-Grid Borders

I have designed a sudoku puzzle and I am seeking assistance with CSS to style it. My goal for styling using CSS is illustrated here... https://i.stack.imgur.com/nrA47.png What I currently have appears like this... https://i.stack.imgur.com/zpNp6.png T ...

cssreactjsbordercss-gridsudoku

Are personalized URLs necessary for jump anchor links?

When utilizing 'Jump to' or 'Anchor' links to navigate to a different section of a webpage, should I include a canonical URL or use a 'no-follow' link for SEO optimization? Is it significant at all? And if so, which approach i ...

htmlhyperlinkseoanchorcanonical-link

I'm looking to create a unit test for my AngularJS application

I am currently working on a weather application that utilizes the to retrieve weather data. The JavaScript code I have written for this app is shown below: angular.module('ourAppApp') .controller('MainCtrl', function($scope,apiFac) { ...

javascripthtmlangularjsunit-testing

Verify whether the content within the Div has been modified

I am currently making changes to content within a <div> element. I would like to determine if the data in the <div> has been modified and, if so, save it in a session to persist on refresh. How can I verify if the data has been edited and then ...

javascriptjqueryhtmlcss

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

javascripthtmlcssautomationprotractor

"In the shadows, the .toLowerCase() method of undefined is failing without making a sound, yet the code

It seems that letting things fail in the background is necessary for this example to work consistently. Is there a way to work around this issue? There are instances where I need to check a div with a data-attribute on certain pages and add a class if it ...

javascriptjqueryhtml

Determine if an option is chosen in multiple select elements using Vanilla JavaScript

In order to determine if a checkbox is checked, we use the following code: let isChecked = event.target.checked But what about multiple select options like the example below? <select name="books[]" multiple> <option value="A">A</option& ...

javascripthtmlhtml-selectdom-eventsmultiple-select

Incorporate fresh Google sites into different web pages using iFrame integration

Wishing you a fantastic day! I am currently working on embedding a brand new Google site into another webpage. I attempted to use an iframe for this purpose, but unfortunately it did not work as expected. Here is the code snippet: <iframe width="1280 ...

javascripthtmliframeembedded-resource

CSS3 family tree tutorial: Incorporating a wife into the design

I came across a fascinating tutorial about creating a family tree using CSS3 only. However, I'm struggling to understand how to depict a marriage. To explain further: What the code currently accomplishes is this: what i aim to include is this: Alth ...

htmlcssfamily-tree

What is the best way to retrieve the background color of specific table cells?

I have a table that showcases various pieces of information. One interesting feature I added is a notes column, which includes a tooltip created using CSS and jQuery. However, there seems to be an issue with the tooltip's behavior - when I hover over ...

jqueryhtmlcss-tables

How can I add information into a nested div element?

I encountered an issue when attempting to insert data into my block. The div structure is as follows: <div class="1"> <div class="2"> <div class="3"> <div class="4"></div> </div> ...

javascriptjqueryhtmlcss

JQuery isn't functioning properly on dynamically generated divs from JavaScript

I'm currently tackling an assignment as part of my learning journey with The Odin Project. You can check it out here: Despite creating the divs using JavaScript or jQuery as specified in the project requirements, I am unable to get jQuery's .hov ...

javascriptjqueryhtmlcss

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

[http://jsfiddle.net/w7r3gveg/]1 I am looking to position 4 Facebook logos in the center bottom of my background image. The background is represented by the 'bg' div, while the Facebook logo is in the 'facebook' div. Currently, I can ...

htmlcss

Techniques for Adding Background Color to Fieldset Border

Recently starting to learn HTML and stumbled upon a question: How can I create a background color or image for a field set border? Can I simply use regular color values, or do I need special codes for creating a background color in a field set? Any insig ...

htmlcss

Using Javascript to dynamically add and remove elements on click

Whenever I click on a link, I am able to generate input, label, and text. However, I want to be able to delete these elements with the next click event on the same link: I've tried updating my code like this: var addAnswer = (function() { var la ...

javascripthtml

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

javascripthtmlweb-applicationsnode.jsexpress