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

Exploring the use of callbacks in React closures

After diving into a React related article, I delved deeper into discussions about closures and callbacks, checking out explanations on these topics from Stack Overflow threads like here, here, and here. The React article presented an example involving thr ...

javascriptreactjs

Trouble with displaying a custom marker on Google Maps API v3

I have been struggling to replace the default marker with a custom icon in my Google Maps code. Despite my efforts and thorough research, I cannot seem to get it to work correctly. Below is the snippet of my code: <script type="text/javascript"> fu ...

javascriptgoogle-maps

Show the results sequentially as the PHP script runs

In my current setup, I am working with Order IDs and their respective product requests. When a user selects multiple order IDs and clicks on the start process button, I compare the product requests against available stock levels. The final result displays ...

phpjquerymysqlajax

Provide solely the specified content range

While working with Node.js, my goal is to develop a video server that can serve a specific portion of a larger media file. Thanks to this gist, I have successfully created a video server and integrated it with an HTML5 video player using: <video contr ...

javascripthtmlnode.jsvideoheader

How can I retrieve the value of a JavaScript variable using Ajax?

Hello everyone! I've been a long-time user of various programming forums, but this is my first time posting. Lately, I created a really simple browser-based game, and when I say simple, I mean it's incredibly basic. The whole game logic resides ...

javascriptphpjqueryajax

Utilizing Django framework for crafting a captivating homepage

Successfully set up the django framework and developed an app for my homepage. I added the app to the settings in the project folder and was able to get the HTML running smoothly. However, I am experiencing issues with styling as the CSS won't apply. ...

pythonhtmlcssdjango

Trouble arises when attempting to incorporate the Restangular dependency with Angular using browserify

I've been using browserify to manage my angular dependencies successfully, however, when I try to add restangular I encounter an error: "Uncaught Error [$injector:modulerr]". Here's a glimpse of my package.json: "browser": { "angular": "./ ...

javascriptangularjsbrowserifyrestangular

Having trouble retrieving a hidden value in JavaScript when dealing with multiple records in a Coldfusion table

In this table, there is a column that allows users to select a predicted time. <cfoutput query="getReservations"> <tbody> <td><input class="form-control predicted" name="predicted" id="ReservaTempoPrevisto" placeholder= ...

javascriptdatabasecoldfusion

Is there a way to identify when no rows contain specific values in PostgreSQL or node.js and return false?

Here is an example of a table: P Q t f f t f f In SQL, is there a way to return false when querying for t t, but true when querying for t f, f t, or f f? Should this be handled with node.js by first doing a select and then using if-else statements based ...

javascriptsqlnode.jspostgresqlselect

td:before combined with vertical-align:middle

To achieve a table with square cells, I implemented the following CSS: table { width: 100%; table-layout: fixed; } td { text-align: center; vertical-align: middle; } td:before { content: ''; padding-top: 100%; float: ...

htmlcsshtml-tablevertical-alignment

Bootstrap 4 Carousel: Displaying Multiple Frames Simultaneously and Sliding One at a Time

A different query was raised regarding the same issue (refer to the mentioned question) for Bootstrap 3, however, the suggested solutions are not compatible with Bootstrap 4. The illustration in this post effectively conveys what I am aiming for. Take a ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-4bootstrap-4

Store the ID of a div in a variable

Currently, I have transformed rock paper scissors from a terminal/console game using prompts and alerts to something playable in a web browser through the use of the jQuery library. In order to achieve this transition, I created images for each hand - roc ...

javascriptjqueryhtml

jQuery Live allows for the execution of functions multiple times

When utilizing jQuery's 'live' function in dynamic pages where content is loaded via Ajax, I have encountered an issue where button events detected with 'live' are being duplicated. Whenever I access the page containing these butto ...

jquery

Placing numerous meshes that are mostly alike but not exactly the same in a scene

We utilize a single geometry that is attached to every mesh within our scene. var geometry = new three.PlaneGeometry(1, 1, 1, 1), Each object has a texture that is generated and cached to form a new material and a mesh for the object. this.material = ne ...

javascriptthree.jswebgl

Showing code snippets with possible markup or malicious content as plain text strings

I am facing a challenge with a table on my webpage where values are added through a textbox in a popup modal. However, when I try to add the string ); to the textbox, it triggers a popup instead of being displayed innocuously in its original format on the ...

javascripthtmljqueryasp.net

Troubleshooting why passing $var within @{{ }} in Vue.js + Laravel is not functioning as expected

I am integrating Algolia Vue-InstantSearch into a Laravel Project. Since we are working with a blade file, the {{ }} symbols will be recognized by the php template engine. To ensure that they are only understood by Vue in JavaScript, we can add an @ prefix ...

javascriptphplaravel-5vue.jsalgolia

Embed the content within an iframe element

Is it possible to insert content within an iframe tag like this? <iframe> <p>Hello World</p> </iframe> I attempted to do so, but the text "Hello World" did not display. Any help would be much appreciated. ...

htmliframe

Retrieve a file through a POST request with node.js

Hi everyone, I'm trying to create a "export to excel" functionality in Node.js for a page. By using Chrome DevTools, I discovered that the file is downloaded after a post request, so I need to replicate it. https://i.sstatic.net/aL9SO.png var reques ...

javascriptnode.jsparsingdownload

How can I implement an AJAX request with MongoDB in Node/Express?

Let's begin with a simple webpage: an HTML Form, a button, and a div-box. When the button is clicked, the Form data will be sent via AJAX. The data will then be stored in MongoDB and retrieved into the div-box seamlessly without any page refresh. A ...

javascriptjqueryajaxnode.jsmongodb

Border Effect Resembling Windows Tiles

When you hover your mouse over a tile in Windows, a cool effect happens: Hovering outside the tile, but within the container area: Hovering inside a tile: Hovering outside a tile at its mid point, causing opposite sides to light up: I'm lookin ...

javascripthtmlcss