Ensure that the inner div has a height of 100%

Can someone help me troubleshoot my HTML code?

<div id="container">
    <div id="left-container">
    </div>

    <div id="right-container">
    </div>
</div>

Although the container is set to 100% height, the #left_container does not seem to be following suit.

Attached below is my CSS code and a screenshot. The yellow section should also be filling up the entire height. (Yellow represents the background color of the #left-container)

html, body {
    height: 100%;
}
#container {
    position:relative;
    margin: 0 auto;
    width: 100%;
    height:100%;
    height: auto !important;
    min-height:100%;
    background: #fff;
}
#left-container {
    width: 300px;
    background: #ff0;
    height:100%;
    height: auto !important;
    min-height:100%;
}

Answer №1

This post delves into the issue and its resolution in depth:

Additionally, this code snippet may prove helpful:

#outer {
  position: absolute;
  height: auto;
  width: 200px;
  border: 1px solid red;
}

#inner {
  position: absolute;
  height: 100%;
  width: 20px;
  border: 1px solid black;
}
<div id='outer'>
  <div id='inner'>
  </div>
  text
</div>

For more insights on the above, check out:
How to make a floated div 100% height of its parent?

Answer №2

To solve this issue, try thinking creatively and looking beyond the usual solutions. Instead of making both containers stretch to 100%, consider using a technique known as Faux Columns. This involves combining the background images for both sidebars into one image and setting it as the main container's background. As one sidebar expands, it pulls down the background for both sidebars, creating a seamless look.

Answer №3

   
<style>
    #outer-container {
        height:200vh;
        width:100%;
         position:relative;
        background-color:orange;
    }
    #left-container{
        position:absolute;
       width:100%;
       height:100%;
        background-color:blue;
    }
</style>
<body>

    <div id="outer-container">
        <div id="left-container">
        </div>
    </div>

</body>

Answer №4

Simply using the following CSS properties should suffice:

margin:0;
padding:0;
height:100%;

This should provide you with the desired outcome for your containers.

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

What is the best way to relocate an image or link using CSS?

I've been attempting to adjust the position of this image using CSS, but no matter how many times I try, it just refuses to budge. Can someone please help me troubleshoot what might be causing this issue? #yahoo1 { position: absolute; top: 100p ...

Transferring an image between two <td> cells within the same table

For a project, I'm working on creating a Checkers game. I have the checker board and pieces ready, but I'm struggling with the movement logic. My goal is to enable the image to move or transfer from one td element to another when clicked. A frie ...

Dealing with checked input type='checkbox' in React - A guide

Having a set of checkboxes, some already checked and some to be updated by the user. The issue here is that while the checkboxes render correctly initially, they do not change upon clicking. The 'checked' value does get updated when onChange is t ...

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

Tips for effectively utilizing the count() function within selenium's xpath feature?

By utilizing the count() function within XPath, we can extract the total count of matching nodes instead of using findElements() and size() methods. Do you know if the count function in XPath returns an integer value? For example, Let's say my xpath ...

Display a JQuery dropdown menu depending on the ID of the current section

In my one-page structure, I have multiple sections with a categorized nav-bar that includes drop-down lists for each category. My goal is to display the drop-down menu of the category corresponding to the current section. if($("#About").hasClass('act ...

How about implementing a 'thumbs up' feature on every post?

I'm relatively new to SQL and PHP and have successfully set up a database where I can input entries through an HTML form. However, I am struggling with implementing a 'like button' feature that will increment a counter for each specific post ...

HTML embedded content is not appearing on the React webpage

I'm attempting to incorporate GoFundMe donation buttons into a React page, but unfortunately, they aren't displaying on the screen. const Donation = () => { return ( <div> <div className="gfm-embed" d ...

Removing special characters in ASP

Can someone please advise me on how to remove special characters in ASP (classic)? I am using an MS Access database. Is there a function similar to stripslashes() or addslashes() in PHP that can help with this? Any assistance would be greatly appreciated ...

A missing semicolon is encountered while compiling a React application

I am currently working on my app using Create React App and incorporating scss. I have used a vscode plugin to convert the scss to css, but I keep encountering an error when running npm run build. The error message reads as follows: [email protected ...

How to make text in HTML and CSS stay at the bottom of a div?

I am in the process of creating a website dedicated to my "Starcraft II" clan. My goal is to have the navigation bar display the text "ALLOYE" and remain fixed at the bottom of the screen. I attempted to achieve this using the following code: vertical-alig ...

Is there a way to set the focus on a text box automatically when a page is loaded, even without support for JavaScript?

On my form, I have a few text fields and I am looking to automatically set the cursor (auto focus) on the first text field when the page loads. I aim to accomplish this without relying on javascript. ...

The Zurb Foundation grid system is causing issues when trying to implement vertical tabs

My vertical tabs are giving me trouble when I try to nest grid or block elements, causing everything to overflow outside the element. For example, in the image below, the numbers 1,2,3 should be in the right section. <div class="row"> <div class ...

Incorporate a dynamic form into an ngx-sortable control in Angular 6

Having difficulty with the layout implementation in Angular 6. A form component is dynamically added during runtime. Using ngx-sortable, I aim to have dynamic content within it, but am facing challenges with the setup. Implementing Sortable control: &l ...

Challenges with fading images using jQuery

I am currently working on animating a 5 image slideshow by creating a fading effect between the images rather than just switching abruptly. Here is my HTML structure: <div id="slides"> <ul class="pics"> <li><img src="imag ...

Including a drop-down arrow or triangle next to the initial button

In the navigation bar displayed below https://codepen.io/shaswat/pen/XzpRXL Is it possible to create a down triangle or arrow next to the "home" link, which changes direction upward when hovered over? How can this be achieved without modifying any HTML e ...

Locate specific elements on a webpage without scanning through the entire content

Is there a way to optimize the performance of getElementsByTagName("td") so it doesn't search the entire document? I'm experiencing long wait times for results. Here is an excerpt from my code: $ie.Document.getElementsByTagName("td") | ? {($_.c ...

Enhancing the visual appeal of a standard jQuery slider with thumbnails

Recently, I incorporated the Basic jQuery slider into my website, which can be found at . As a novice in jQuery but well-versed in HTML and CSS, I have managed to make it work seamlessly on my site. However, I am curious to know if there is a way to displa ...

React Nested Grid with Material-UI

https://i.stack.imgur.com/toxDA.jpg I am striving to replicate the layout demonstrated in the image below So far, I have the following code snippet: <Grid container justify=“space-between”> <Grid container item> <Grid ite ...

Add CSS properties to child elements that are not of a specific selector, while styling their descendants without any restrictions

Seeking assistance for an Angular application, but the query also pertains to CSS principles in general. In my Angular project, I have a main component containing several child components, all with standard view encapsulation. Specifically, I am looking t ...