Highcharts that are set to take up 100% of the height of their parent element when the parent

The chart in this example automatically adjusts to the full height of its parent, completely disregarding the height of its grandparent.

HTML:

<div class="wrapper">
  <div class="huj2">
    <div class="huj">
      bla bla
    </div>
    <div class="huj">
      <div id="ChartContainer2">
        // The Chart goes here
      </div>
    </div>
  </div>
</div>

CSS:

#ChartContainer2 {
  width: 100%;
}

.huj {
  height: 50%;
  position: relative;
}

.huj2 {
  height: 100%;
}

.wrapper {
  position: fixed;
  height: 100%;
  width: 100%;
}

View on Fiddle - http://jsfiddle.net/a40a0bjy/17/

Answer №1

To make your high chart container functional, simply set the height to 100%. The code snippet below provides a solution for your specific fiddle scenario.

#ChartContainer2 {

  width: 100%;
  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

Troubles with CSS Selectors in Internet Explorer 6

When I tested my website on Internet Explorer 6, I noticed a problem with the global navigation. Specifically, when I clicked on the ABOUT ME page, the image in the navigation did not match the active page. Although CONTACT US was displayed instead of abou ...

The parent of these inline-blocks does not adjust its width to match its children, even when the parent has overflow-hidden applied

This is the code snippet I have been working with: <!DOCTYPE html> <html> <head> <style> div.ex2 { background-color: lightblue; width: 110px; height: 110px; overflow: ...

Determining background placement using facial recognition coordinates

Managing a website with a large database of around 30,000 images linked to listings can be quite challenging. These images come in various sizes and aspect ratios, making it difficult to display them uniformly on the site. To address this issue, I have cre ...

Preventing the element from breaking when it is not the child: Tips and Tricks

In order to align both .quote-container and #new-quote elements in the same line, even when the window width is very small (e.g., 83 pixels), I used min-width on the .quote-container element successfully. However, applying the same technique to the #new-qu ...

What is the best way to dynamically adjust the width of multiple divisions in Angular?

I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of th ...

What is the best way to create a Bootstrap table with a fixed header that stays in place

I am currently working on creating a Bootstrap table that is responsive. My goal is to have the table head scroll along with the table data when scrolling down, without setting a fixed height for the table. I want the page to expand naturally as more rows ...

What is the best way to enlarge an image while keeping it contained within a card using Bootstrap?

Is it possible to create a visually appealing card similar to the image provided using Bootstrap 5.3.3 and HTML on a website? https://i.sstatic.net/OH4U0.png ...

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...

Learn how to dynamically toggle the visibility of tabs in CodeMirror with a simple button click

Currently, I am developing a Python editor for a website using the Code Mirror JavaScript library. There is a button called toggle invisibles that, when clicked, displays spaces and end-of-line markers. I also wanted to show tabs, which are not supported b ...

The functionality of jQuery code can be inconsistent at times, running smoothly

I'm facing confusion with my jQuery code! It works fine sometimes, but not always. I had a similar issue with CSS too, and I initially thought it was because of the web browser. However, the problem persists. JAVASCRIPT CODE $('.glyphicon-chevr ...

Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving ...

The css() function appears to be failing to apply the background property to the body element

I have tried using these different methods in my code to solve the issue, but none of them seem to work. Please suggest an alternative approach for resolving this problem. // Approach 1 if ("${actionBean.backgroundImage}" != null){ $(document.body). ...

What could be causing the image not to be centered inside the <table><td>?

Currently, I am developing a web application with Google Script that generates a dashboard featuring multiple tables. To design the layout, I am utilizing Bootstrap (https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css). Despite ...

Tips for displaying the product title of an item in the Woocommerce shopping cart

Is there a way for me to display the title of the product in my Woocommerce store's cart on the checkout page? My store only allows one product in the cart at a time, and I want to customize the checkout page to show the product title. I've tri ...

Adjust the height of the following column to match the responsive height of the initial column

Those who have marked it as duplicate, I want to clarify that my question is not about making Bootstrap columns all the same height. Instead, I am focusing on responsive images while maintaining their aspect ratio, which is a different issue from simply en ...

"Can I align a div in the center using inline-block with an

Despite my efforts, I still can't figure this out. My apologies for the duplication. I attempted to use text-align: center, margin: 0 auto;, and display: flex;, but none of them worked as expected in the end. I apologize for the messy formatting. ...

How can you insert an image in HTML without a set path?

Converting a report from HTML to *.rtf / *.doc format <header> <img class="img" src="C:/Users/????/Desktop/Test/img/header.png" alt="img"> </header> Upon downloading the *.rtf or *.doc file, the image link may not work if there is n ...

What is the best way to switch from one HTML file to its associated JavaScript and CSS files once a specific event is activated?

Is my approach to organizing and building my first website game correct? I have 5 separate HTML files along with their respective JS and CSS files. My goal is to slide in the content from the next HTML file, including its corresponding JS and CSS files, wh ...

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

Fashionable flexbox chat design break

Can anyone explain why the image shifts to a new line when the dimensions of the bubble are restricted? If I adjust the maximum width of the bubbles to calc(100% - 70px), the image stays on the same line, but the last word may break onto a new line, disru ...