Is there a way to ensure that a DIV element expands to the bottom of the page once scrolling has occurred?

Trying to create a webpage with a specific layout:

Everything looks good, but if the content on the right goes off the page and requires scrolling, the left menu bar ("second_navbar") doesn't stretch to the end of the page.

I've attempted changing the "position" to absolute and adding a "bottom" attribute set to 0, but it didn't work.

How can I make the left navbar stick to the top navbar and stretch to the bottom of the page after scrolling?

Thank you in advance for any advice!

UPDATE: I've added content on the left side, and the issue becomes noticeable when you minimize the window and scroll down.

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
html {
  min-height: 100%;
}
body {
  background-color: rgb(225, 225, 225);
}

#header {
  position: relative;
  background-color: white;
  text-align: center;
  border-color: rgb(93, 87, 87, 0.5);
  color: rgb(93, 87, 87);
  border-bottom-style: solid;
  border-width: 1px;
}

p {
  margin-top: 0;
  padding: 5px;
  font-size: 48px;
}

#navbar {
  position: relative;
  font-weight: bold;
  color: rgb(93, 87, 87);
  padding: 5px;
  align-items: center;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

#navbar li {
  width: 160px;
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  list-style: none;
}

#second__navbar {
  width: 25%;
  height: 100%;
  position: fixed;
  background-color: white;
  text-decoration: none;
  list-style: none;
}

#second__navbar  li{
  display: block;
  font-size: 20px;
  margin: 15% 0 0 15%;
}
<body>
  <div id="header">
    <p>My Name</p>
  </div>
  <div >
    <ul id="navbar">
      <li>TITLE</li>
      <li>TITLE</li>
      <li>TITLE</li>
      <li>TITLE</li>
    </ul>
  </div>
  <div>
    <ul id="second__navbar">
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
      <li>SUBTITLE</li>
    </ul>
  </div>
  <div style="padding-left:50%; margin: 20% 20% 20% 20%">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</body>

Answer №1

To achieve the desired layout, I utilized the CSS property display: flex and made adjustments to the container divs. For a comprehensive understanding of flexbox, I recommend referring to A Complete Guide to Flexbox. It's important to note that while flex is great for organizing container elements, it may not be needed for smaller page elements like text paragraphs. Additionally, I found it necessary to include height: 100% for the html element. I suggest becoming familiar with your browser's developer tools to identify any elements that are not aligning as expected.

html {
  height: 100%;
}
...

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

All the optgroups in the select picker are being duplicated from the first optgroup

I am currently facing an issue with a select picker multiple dropdown. When I add optgroups, the values of the second and third optgroups are being copied by the first optgroup. The opt-groups are being populated via JavaScript. <select class="mod ...

Sending Input to SQL DataBase Using C# and HTML

I need to execute a C# function when a button is clicked that captures a rating (1-7) and saves it to a database along with a text input. Here is the feedback section: <asp:PlaceHolder ID="AnswersPlaceholder" runat="server" Visible="false"> <asp ...

Glass-pane or angular/HTML overlay on a designated element

Is there a way to create a glass-pane effect, like an hourglass symbol on a semi-transparent layer, within the boundaries of an HTML element E? The goal is to have the glass-pane only overlap the area within E's boundaries. When the glass-pane is ac ...

Chrome's behavior of reducing the width of inline elements when the content is dynamic

Upon opening the specified URL in Google Chrome, an issue can be observed where on the initial load everything appears fine. However, upon refreshing, the width of the three items at the top (Bedingungen, Preise, and So geht's) collapse. This seems to ...

Integrating content from a separate PHP page into the main index PHP page

I can't seem to get the #container1 div on my index.php page to load with the content from another #container2 div on page1.php. It's frustrating because I've checked my file hierarchy and everything seems correct. This is how my files are ...

Is there a way to condense a paragraph of text without using a span or div element?

There is a common scenario where I often encounter this issue: <span> <p>hello world</p> </span> It involves reducing the width of a paragraph to fit the text, but unfortunately it leads to clutter in my HTML. Is there a way to ...

Tips for creating a subclass using jQuery

I am familiar with selecting the class "myClass" using $(".myClass"), but my question is how do I select the child link within an element with the class "myClass" using jQuery? Here is a sample of the code: <a href=#>Home</a> <div class ...

Learn the steps to initiate a Vimeo video by simply clicking on an image

I have successfully implemented some code that works well with YouTube videos, but now I am looking to achieve the same effect with Vimeo videos. Does anyone have suggestions on how to do this? I need to replace the YouTube description with Vimeo, but I&ap ...

What is the best way to insert a JavaScript button before an HTML button on a webpage?

Currently, I am working on creating a calculator using JavaScript and HTML. My goal is to add memory buttons (MS, MC, MR) before the clear button (C) on the calculator interface. Despite trying various methods, I am facing some challenges in achieving this ...

Unable to pass props to component data using Vue framework

I'm facing an issue with passing props in my component to the same component's data object. For some reason, I'm only receiving null values. Does anyone have any suggestions on how I should approach this problem? It seems like my Vue compone ...

I'm puzzled as to why the background isn't fully covering all of the content on the page

As an IT student, I have been diligently working on creating a website for my assignment. However, I am facing an issue with the background not adjusting properly based on the content placed within it. While one page includes all the sub-divs as intended, ...

SVG path tooltips are not functioning properly, unlike in regular HTML where they work perfectly

I have a CSS/HTML code that works perfectly in plain HTML and is also shown as an example at the end of the demo. However, it fails to work properly in SVG. Upon inspecting the element, I found that the :after code is being called but the tooltip remains ...

Scrollbar Overlay

I am currently working on an HTML page where I have implemented a CSS style overlay lightbox effect using CSS and jQuery. If you want to take a look at the code, click here One issue I am facing is that when I resize the window height so the right-hand s ...

Dropdown fails to update upon selection using Ajax technology

My issue involves two select dropdowns: regions and towns. When a region is selected, it should update the towns dropdown with the appropriate towns using Ajax. My approach is to use an imagemap to select the dropdown for the region, which will trigger th ...

Updating or swapping images using JavaScript and HTML

I am looking to implement a feature similar to Twitter, where uploading a picture automatically updates the avatar by displaying a spinner while the new image loads. I attempted to accomplish this with the following code: <script language="javascript"& ...

What is the best way to update text in an element when hovering or activating it?

I am currently designing a website with a prominently placed "Hire me" button in the center of the page. The button was implemented using the following code: <div id="hire_me_button"> <a href="contact.html"><h4 id="hire_me" class="butto ...

Inconsistent CSS3 transitions behavior in Firefox 4

I have been playing around with some css3 transitions and created a slider test. It works perfectly in webkit browsers, but I have noticed an issue in Firefox 4. When clicking on the left link for the first time, the slider is supposed to slide to the left ...

Leveraging jQuery Ajax and MySQL to generate dynamic HTML content

I'm in the process of creating a unique photo gallery that utilizes dynamic features. Instead of relying on constant HTML/PHP refreshing for updates, I am incorporating jQuery to handle dynamic MYSQL queries. As a beginner, I've managed to creat ...

do not display entries with expired duration

update1: Unfortunately, even after testing in the sandbox, the result is still returning empty :( https://codesandbox.io/s/happy-https-u8lu2 After filtering my starsValues based on height and weight, I am able to get some results. However, I also n ...

Bootstrap grid: Preventing horizontal scrolling when all columns cannot fit in a single row

Why is it that when the column does not fit in one row, instead of showing a horizontal scrollbar, it goes to the bottom? <div class="container-fluid main-container" style="overflow-x: auto; width:600px"> <div class="row mx-5"> < ...