Ensure that the child div with a background color extends all the way to the bottom of its parent div

Having trouble getting two divs inside another one to stretch to the bottom without cutting off content?

The goal is for both divs to adjust in height based on whichever one is longer, filling the outer div completely. When the left div (menu) is longer than the right div (content), a solid color should extend to the bottom of the page on the left side. Conversely, when the content is longer, nothing should be cut off.

An example of this issue can be seen in this jsfiddle: http://jsfiddle.net/nKATZ/

If the menu is shorter than the body, it looks correct: http://jsfiddle.net/nKATZ/1/

Here is the code:

html

<div class="mainBox">
<div class="leftBox">
    <a href="#">here</a><br />
    <a>here</a><br />
    <a>here</a><br /><a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
    <a>here</a><br />
</div>
<div class="rightBox">
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    body textbody text<br />
    ...
</div>
<div class="clear" ></div>
</div>

css

body {
    background: #15384C;
    font-family: 'Dosis', sans-serif;
}
.mainBox {
    margin-right: auto;
    margin-left: auto;
    width: 960px; 
    background: white;
    position: relative;
    padding: 0px;
    overflow: visible;
}
.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
}
.rightBox {
    width:720px; 
    float: right;
}
.clear {
    clear:both;
}

Answer №1

Here is a suggestion:

body {
    background: #15384C;
    font-family: 'Dosis', sans-serif;
}
.mainBox {
    margin-right: auto;
    margin-left: auto;
    width: 960px; 
    background: white;
    position: relative;
    padding: 0px;
    overflow: hidden;

}
.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
    margin-bottom: -2000px;
    padding-bottom: 2000px; 
}
.rightBox {
    width:720px; 
    float: right;
}
.clear {
    clear:both;
}

Answer №2

These two CSS lines should be the solution you need.

.leftBox {
    float: left;
    width: 200px;
    background-color: #CF4A41;
    height: 100%; /* include this line */
    position: absolute;  /* also, this line */
}

View Demo

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

How to use jQuery to recursively assign numbered classes to groups of div elements

I am dynamically grouping a fixed number of divs from an array (e.g. 4 in each group). The total number of .item divs retrieved from the array is uncertain... I need to recursively assign the same class to these groups of wrapped divs: <div class="wrap ...

Switch the dropdown selection depending on the checkbox status

I'm currently facing a bit of confusion with my project. I am constrained by an existing framework and need to come up with a workaround. To simplify, I am tasked with populating a dropdown list based on the selected checkboxes. I have managed to get ...

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

Here is the code and link for my unique image editor. I would like to allow users to enter the desired width and height of the selection area. For example, if a user enters a width of 300 and height of 200, the selection size will adjust accordingly. Addit ...

An instructional HTML/JS dialogue for a linked page

On my website, there is a link that, when clicked, opens a new tab with a page that I don't control. I want to guide the user on what to do next after they are redirected to this new page ("Now please press the green button on this page"). Ideally, I ...

What is the best way to use Javascript in order to automatically open a designated tab within SharePoint 2013?

Currently, I am in the process of developing a website project which incorporates Bootstrap tabs utilizing jQuery. While these tabs are functioning excellently on various pages, I am faced with the challenge of linking specific icons to corresponding tabs ...

Utilize jQuery's .append() function to dynamically insert content into your webpage

I currently have tab elements set up like this: <div class="tab-pane fade active in" id="tab-a"> </div> To populate the content of that tab with a JavaScript string array, I am using the following code snippet: var full_list = ""; for (var ...

The scrolling function of the jQuery UI select menu is not working properly on the Android browser

I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...

Preventing special characters in an input field using Angular

I am trying to ensure that an input field is not left blank and does not include any special characters. My current validation method looks like this: if (value === '' || !value.trim()) { this.invalidNameFeedback = 'This field cannot ...

What is the best way to incorporate a splatter image within an MDX blog post?

I am working on an MDX blog where I render a blog post. pages/index.tsx <main className="flex min-h-screen dark:bg-black"> <div className="wrapper mb-24 gap-8 px-8 lg:grid lg:grid-cols-[1fr,70px,min(70ch,calc(100%-64 ...

Looking for a way to locate words enclosed in square brackets and change them into dynamic URLs using PHP?

In my quest to locate words enclosed in square brackets, such as [word], and form a dynamic URL, I encountered a challenge. Although I attempted using the str_replace() function to identify the word, it resulted in generating links in this format: <a ...

Applying a variety of elements to a single function

I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...

Are you looking for a stunning vertical gallery with responsive design in Photospace Gallerific? Let's enhance it

Is there a way to make my gallery from http://wordpress.org/extend/plugins/photospace-responsive/ responsive? I want it to change from a vertical layout to horizontal when the browser is scaled down for mobile viewing. Can you advise on how to ensure that ...

Achieving 100% height in a div container using flex while maintaining vertical centering

Struggling to center text and buttons using flexbox while keeping the columns equal? Setting column height as 100% can be a challenge. If you set the height to 100%, vertical alignment may no longer be centered. Avoid resorting to tables or JavaScript for ...

Ensure that the background div extends all the way to the bottom of the page

Is there a clever CSS technique that allows a div to extend all the way to the bottom of the screen without displaying any visible content inside? Or am I better off using JavaScript for this purpose? Thank you, Richard ...

Revealing information about a photo when hovering over it

I am currently working on a project where I need to display images from a database in two columns. My goal is to have additional details about each image, such as the country and year it was taken, appear when I hover over them. A good example of what I&ap ...

Is there a way to extract shared properties within a Material UI style declaration?

I am working with a specific set of style rules that define different statuses: status_in_progress: { fontSize: 14, backgroundColor: theme.palette.success.dark, padding: 2, paddingLeft: 5, paddingRight: 5, display: "inline-bl ...

The window.frames function is coming back with a blank, empty

In an attempt to set up a simple HTML file on my local machine, I have the following code: <html> <head> <title>Testing</title> </head> <frameset framespacing="0" frameborder="0" rows="20px,100%" border="0"> ...

The mobile responsive view in Chrome DevTools is displaying incorrect dimensions

Seeking some clarification on an issue I encountered: I recently created a simple webpage and attempted to make an element full width using width: 100vw. However, I observed that on screens smaller than around 300px, the element appeared smaller and not t ...

Is it possible to access the ID element of HTML using a variable in jQuery?

I have fetched some data from a JSON ARRAY. These values include Value1,Value2, and Value3. Additionally, I have an HTML checkbox with an ID matching the values in the array. My goal is to automatically select the checkbox that corresponds to the value re ...

Utilizing SASS for customizable color schemes

I am in the process of creating a website using Rails 3 which will allow users to customize their profiles with different layouts and color schemes. I have already implemented SASS, and I believe it would be incredibly useful if I could achieve something l ...