Ensure that the floated element stretches to 100% height in order to completely fill the page

I'm working on achieving a height of 100% for the left sidebar so that it fills the page regardless of the size of the "main" div.

Currently, it stops at the normal page height and doesn't expand further.

Is there any way to make this work as intended?

JFiddle: https://jsfiddle.net/hjnheonk/

HTML:

<div class="container">
<div class="navbar-left">
    <div id="top">
        <h2><b>Admin</b>Panel</h2>
    </div>
    <div id="navigation">
        <ul>
            <li class="nav-header">Main Pages: </li>
            <li>
                <a href="index.php">Home</a>
            etc ...
        </ul>

    </div>
</div>

<div id="navbar-top">
    <div id="user">
        <?php echo'<p id="user_greeting">'.$username. '<span class="fa fa-caret-down"></span>'.'</p>'?>
    </div>
    <div id="icon">
        <span>
            <hr><hr><hr>
        </span>
    </div>

  <div class="main">

  </div>    
</div>
</div>

**CSS: **

html,body {
    height: 100%;
}

.container {
    margin-left: 230px;
    height: 100%;
    position:relative;
}

.navbar-left {
    background-color:rgb(26, 34, 38);
    color:white;
    width: 230px;
    margin-left: -230px;
    height: 100%;
    float:left;
}

.navbar-left #top {
    background-color:#367fa9;
    min-height: 50px;
    text-align: center;
}

.navbar-left #top h2 {
    font-size: 20px;
    padding: 15px 0px;
}
#navbar-top {
    float:right;
    width: 100%;
    position:relative;
    background-color:#3c8dbc;
    width: 100% !important;
    margin:0 auto;
    border: none;
    min-height: 51px;
}


#navbar-top #icon {
    width: 20px;
    padding: 18px 10px !important;
}

#navbar-top #icon hr {
    margin:0 auto;
    padding: 0px;
    border: 1px solid white;
    border-radius: 5px;
}

#navbar-top #icon hr:not(:first-child) {
    margin-top: 5px;
}

#navbar-top > div:hover:not(#userDropdown) {
    background-color:#47a0d3;
    cursor: pointer;
}

#brand {
    float:left;
}

#navigation .nav-header {
    background-color: #272f33;
    padding: 12px 30px;     
    text-align: left;
    margin-top: 40px;
    margin-bottom: 25px;
}

#navigation ul li a:hover {
    background-color: #273136;
}

#navigation ul li a {
    width: 100%;
    display: block;
    padding: 12px 0px;
    background-color: #1a2226;
    text-align: center;
    color:white;
    text-decoration: none;
}

.main {
    float:left;
    width: 100%;
  background-color:pink;
  height: 1000px; /*Used as an example to show */
}
javascriptjqueryhtmlcssheight

Answer №1

If you're thinking about achieving this using only CSS, the way you've sliced it won't work. In order to make it compatible with the current layout, you'll need to calculate the height through JavaScript based on the content and height of the right column.

In your particular scenario, there are a few approaches you can take:

  1. Calculate the height using JavaScript by considering the content and height of the right column.
  2. Nest DIVs so that one div stretches its parent, allowing for a CSS-based solution. You can explore more about this here.
  3. "Override" the default behavior of divs by utilizing properties like "display:table-cell;" (table, table-row, etc), or embrace modern CSS features such as flexboxes.

The choice of approach is ultimately yours to make.

Answer №2

Is it necessary for the container to be specified as a percentage? If not, an alternative approach could be:

$('.sidebar').css('height', $('.wrapper').height()+'px');

Answer №3

After incorporating Farside's technique and making some adjustments, this is the updated code I came up with:

var column = $(".column_left").height() + "px";
$(".column_right").css({"height": column});

$(window).on('resize', function(){ //handles window resizing to maintain column height
   var column = $(".column_left").height() + "px";
   $(".column_right").css({"height": column});
});

Answer №4

Here is a simple solution using only CSS.

Check out the JS Fiddle: https://jsfiddle.net/9v1xjpLw/7/

Below are the modified classes from your existing code:

#navbar-top {

    width: 100%;
    position:relative;
    background-color:#3c8dbc;

    margin:0 auto;
    border: none;
    min-height: 51px;
    display:table-cell;
    vertical-align:top;
}
.navbar-left {
    background-color:rgb(26, 34, 38);
    color:white;
    display:table-cell;
    vertical-align:top;

}
//extra style added
#navigation{
  width:230px;
}

By incorporating @Farside's suggestion in the third point, I implemented "display: table-cell;" on your Div elements. This simulates a table layout where the row height adjusts to the content within it. Keep in mind that elements with "display: table-cell;" do not have fixed width and height; they adapt based on their content. You can set the dimensions of elements inside them for consistent sizing.

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

Adjusting a parameter according to the width of the browser window?

Using Masonry, I have implemented code that adjusts the columnWidth to 320 when the screen or browser window width is less than 1035px. When the width exceeds 1035px, the columnWidth should be 240. However, the current code keeps the columnWidth at 320 re ...

javascriptjqueryjquery-masonry

Data string not being converted correctly to date format

Here is a table I am currently working with: ID DateColumn 1 3/7/2019 5:29:38 AM 2 3/8/2019 5:28:38 AM 3 3/7/2019 5:30:38 AM 4 3/7/2019 5:31:38 AM The date column in this table is being processed as a string when bound to the grid. To ...

javascriptjqueryangulartypescriptdate

Is it possible to create a single code that can be used for various buttons that perform the same function?

Whenever I click the right button, the left button appears and when I reach the last page, the right button disappears. However, this behavior is affecting both sections. Is there a way to write separate code for each section? I managed to make it work by ...

javascriptjqueryhtmlcss

Spring REST service prevents Cross-Origin Requests with AJAX

Having Trouble Accessing Spring REST Service My spring service @RequestMapping(value = "/MAS/authenticate", method = RequestMethod.POST) public ResponseEntity<Map<String, String>> authenticate(@RequestBody Subject subject) { Map<String ...

javajavascripthtmlajaxspring

What is the best way to place a parent div above its child element?

I'm currently dealing with a container div styled with background-color: red;. This container has around 12 children, and the last child is set with background-color: blue;. My goal was to position the container on top of the child with the blue backg ...

htmlcssz-index

Adjusting SVG size based on the position of the cursor for transforming origin

My goal is to scale an SVG circle using the trackpad (by moving two fingers up and down), with the origin of the transform being the cursor position. Initially, the scaling works as intended, but on subsequent attempts, the circle changes position, which s ...

javascripthtmlcsssvgcss-transforms

Firefox does not allow contenteditable elements to be edited if they are nested inside a parent element that is draggable

Here is a basic HTML example: <div draggable=true> <div contenteditable=true>can't edit me</div> </div> When testing in Chrome, I noticed that I was able to edit the contents of the contenteditable div, however, this functi ...

javascripthtmlgoogle-chromeinternet-explorerfirefox

Is there a way to trigger a function within the submit handler with jQuery validation?

I've been attempting to trigger an ajax function once the form is validated, but I'm running into some issues. The jQuery on-submit method below is working perfectly for me. $('#promotionAdd').on('submit',(function(e) { ...

jqueryajaxjquery-validate

jQuery: What's the Difference Between Triggering a Click and Calling a Function?

Imagine having certain actions assigned to a link using .click or .live, and wanting to repeat the same action later without duplicating code. What would be the right approach and why? Option 1: $('#link').click(function(){ //do stuff }); //c ...

javascriptjquery

What is the best way to transfer XML file information using AJAX to a Webmethod?

I'm encountering an issue when attempting to send XML via an ajax call to my Webmethod (C# Webforms): Previously, I successfully tested the ajax call with JSON and was able to send JSON to the Webmethod. Although the response status code returns as ...

javascriptc#ajaxwebformswebmethod

A step-by-step guide on connecting an event listener to the search input of Mapbox GL Geocoder in a Vue application

I've encountered a challenge trying to add an event listener to the Mapbox GL Geocoder search input within a Vue application. It appears to be a straightforward task, but I'm facing difficulties. My objective is to implement a functionality simi ...

javascriptvue.jsmapbox

When utilizing AJAX, certain web pages may contain a querystring

Encountering an issue with ajax when using query strings. Data can be successfully sent when the page does not have any query string and Info.aspx/Save works perfectly fine. However, when I include query strings and post the same data, it results in a HTTP ...

javascriptjqueryasp.netajaxquery-string

The completion event for Ajax and Json does not activate Google Maps

I'm currently facing an issue with my Google Maps functionality. Despite trying various solutions that involve hidden tabs, the problem persists. The trouble lies in the fact that my ajax function successfully posts and retrieves data, but fails to tr ...

javascriptjqueryajaxjsongoogle-maps

When using multiple select tags with *ngFor in Angular, modifying the value of the first select tag will have an

<table id="DataTable" border="1" ALIGN="center"> <tr ALIGN="center"> <th>name</th> <th>address</th> <th>number</th> <th>type</th> </tr> <tr class="tcat" *ngFor ...

javascripthtmlarraysangulardatatable

Upload an image to a Node.js API using the Next.js API directory

I am working with a file instance that I obtained from the formidable library. Here's how it looks: photo: File { _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined, size: 16648, path: 'public/ ...

javascriptnode.jsnext.jsform-dataformidable

Developing real-time chat functionality in React Native with node.js and Socket.io

I'm on the lookout for resources to help me navigate both server-side (mostly) and client-side development. I recently came across a resource called Simple Real Time chat app but unfortunately, it did not yield significant results. I tried locally ho ...

javascriptnode.jssocket.ioreact-native

What are some techniques for breaking down or streamlining typescript code structures?

Within my TypeScript class, I have a skip function. In the interface, I've specified that the data is coming from the backend. Now, on the frontend, I want to be able to rename the backend variables as demonstrated below. There are multiple variables ...

javascriptangulartypescriptdestructuring

What is the best way to manage these interconnected Flexboxes when using align-items: stretch?

Trying to put this into words is quite challenging, so I created a simple diagram for better understanding: https://i.stack.imgur.com/TMXDr.png The outer parent uses flex with align-items:stretch to ensure that both col 1 and col 2 have the same height. ...

htmlcssflexbox

Convert your Airbnb short link into the full link

I am currently developing an application that utilizes Airbnb links as part of its input. So far, I have identified two types of links: Long form, for example: . These are commonly used on desktop. Short form, such as: . These shorter links are often shar ...

javascriptreactjsnext.jsvercel

Find the element that contains a specific substring in its value using JavaScript

I am trying to find a way to count how many input fields with the class name "text" contain a specific value. document.getElementById('c_files').getElementsByClassName('text').length; Currently, this code counts all textboxes with the ...

javascripthtmlgetelementbyidgetelementsbytagnamegetelementsbyclassname