The young ones whose height is 80% that of their taller parent's

Question

The young ones whose height is 80% that of their taller parent's

Achieving the Desired Height

In order to set a div with 80% of the height of its parent element without a defined height, I am aiming for a responsive effect.

The Layered Layout Issue

Within my layout consisting of five layers - .header, .site, .container, .right sidebar, and .left content, I am facing a challenge. The header has a fixed height of 50 pixels, while the site's height is determined by the viewport height minus the 50 pixels from the header. Inside the site's div, there is a container that I want to set at 80% of the remaining space after considering the header and site dimensions, but I'm struggling to achieve this using percentages instead of fixed pixels.

View the Problem on FiddleJS

Check out the issue demonstration here.

Technical Analysis

The current solution works flawlessly when pixel values are used. However, changing the height of .left-content to 80% reveals the underlying problem due to the dependency on absolute pixel measurements.

Code Snippet (Same as in FiddleJS)

HTML:

<div class="header">
</div>
<div class="site">
    <div class="container">
        <div class="container-head">
        </div>
        <div class="container-body">
            <div class="right-sidebar">
                Just a menu will be right here.
            </div>
            <div class="left-content">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS:

body {
    font-family: Tahoma
}

.header {
    background-color: #49c98e;
    width: 100%;
    height: 50px;
}

.site {
    padding: 1.5em 0;
}

.container {
    background-color: #c7c7c7;
    width: 95%;
    margin: 0 auto;
    position: relative;
}

.right-sidebar {
    background-color: #a94cd5;
    width: 300px;
    height: 100%;
    position: absolute;
    right: 0;
}

.left-content {
    background-color: #dbdbdb;
    width: 100%;
    height: 500px;
    overflow-y: scroll;
}

.left-content ul {
    padding: 25px 0;
    float: left;
}

.left-content ul li {
    background-color: #a94cd5;
    width: 150px;
    height: 100px;
    float: left;
    margin: 15px;
    list-style: none;
}

jQuery/JavaScript:

function calculateResponsiveWidth() {
    $realWidth = $(".container").width() - $(".right-sidebar").outerWidth(),
    $containerContent = $(".left-content");

    $containerContent.css({
        "width": $realWidth
    });
}

$(window).on("resize", function () {
    calculateResponsiveWidth();
});

calculateResponsiveWidth();

Your insights are much appreciated.

Update v1

I am starting to consider that utilizing percentage values may not offer the most optimal solution. Post-container spacing of 25 pixels is necessary, which does not scale well across different resolutions. A Media Query suggestion was made, but I require a JavaScript-based alternative compatible with Internet Explorer 8. Any suggestions or solutions?

Update v2

The identified issue has been overcome through strategic application of JavaScript, mathematical calculations, and logical reasoning. Grateful for all contributions!

javascript jquery html css

Answer 1

Answer №1

To ensure that the container div's height is correctly understood as 80% when applied, you must set height:100%; on the html, body, and site div. Once this is done, the fiddle should work as intended.

http://jsfiddle.net/fvU5d/3/

If your intention was for the container div to be 80% of the site div rather than the viewport, please clarify.

EDIT

Here is a suggestion (http://jsfiddle.net/fvU5d/5/):

var newHeight = $(window).height() - 50;
newHeight = newHeight + 'px';
$('.site').css('height',newHeight);

Answer 2

To ensure that the container div's height is correctly understood as 80% when applied, you must set height:100%; on the html, body, and site div. Once this is done, the fiddle should work as intended.

http://jsfiddle.net/fvU5d/3/

If your intention was for the container div to be 80% of the site div rather than the viewport, please clarify.

EDIT

Here is a suggestion (http://jsfiddle.net/fvU5d/5/):

var newHeight = $(window).height() - 50;
newHeight = newHeight + 'px';
$('.site').css('height',newHeight);

Answer 3

Answer №2

The parent element does not have a defined height, causing confusion with percentages. The element is set to be 80% of an unknown value.

To resolve this issue, I adjusted the height to 80% and specified a height for its parent element.

You can view the updated code snippet here.

.container-body{
    height: 600px;
}
.left-content {
    background-color: #dbdbdb;
    width: 100%;
    height: 80%;
    overflow-y: scroll;
}

Answer 4

The parent element does not have a defined height, causing confusion with percentages. The element is set to be 80% of an unknown value.

To resolve this issue, I adjusted the height to 80% and specified a height for its parent element.

You can view the updated code snippet here.

.container-body{
    height: 600px;
}
.left-content {
    background-color: #dbdbdb;
    width: 100%;
    height: 80%;
    overflow-y: scroll;
}

Answer 5

Answer №3

Optimizing React Components

When dealing with a parent div of unknown height in React, it's crucial to determine the height of the parent dynamically before utilizing percentages. This approach gives you control over the parent's height, allowing you to adjust the child element accordingly.

JS Fiddle Demo:

Check out this code snippet for reference!

How to calculate the parent's height:

document.getElementById('div-to-calculate').clientHeight

The above line only fetches the initial height of the div. To update the height on window resize, additional steps are necessary.

Maintain the height value in state.
Add an event listener that detects window resize and updates the height state accordingly.
Apply the calculated height to the parent container, ensuring it has a definitive height.

Your implementation might resemble the following structure:

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      height: null
    }
  }

  calculateHeight = () => {
    this.setState({height: null}, () => {
      const height = document.getElementById('div-to-calculate').clientHeight;
      this.setState({ height })
    });
  }

  componentDidMount() {
    this.calculateHeight();
    window.addEventListener("resize", this.calculateHeight);
  }

   componentWillUnmount() {
     window.removeEventListener("resize", this.calculateHeight);
   }


  render() {
    return (
      <div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <div style={{flex: '0 0 50px', backgroundColor: 'blue'}}>Header</div>
        <div id="div-to-calculate" style={{
          flex: '1 0 auto',
          height: this.state.height ? `${this.state.height}px` : null
        }}>

          <div style={{ display: 'flex', height: '100%' }}>
            <div style={{ flex: '1 0 auto', backgroundColor: 'yellow' }}>
              <div style={{
                textAlign: 'center',
                width: '250px',
                margin: '0 auto',
                border: '1px solid black',
                position: 'relative',
                top: '50%',
                transform:'translateY(-50%)'
              }}>
                Middle Section
              </div>
            </div>
          </div>
        </div>
        <div style={{ flex: '0 0 50px', backgroundColor: 'blue'}}>Footer</div>
      </div>
    );
  }
}

Answer 6

Optimizing React Components

When dealing with a parent div of unknown height in React, it's crucial to determine the height of the parent dynamically before utilizing percentages. This approach gives you control over the parent's height, allowing you to adjust the child element accordingly.

JS Fiddle Demo:

Check out this code snippet for reference!

How to calculate the parent's height:

document.getElementById('div-to-calculate').clientHeight

The above line only fetches the initial height of the div. To update the height on window resize, additional steps are necessary.

Maintain the height value in state.
Add an event listener that detects window resize and updates the height state accordingly.
Apply the calculated height to the parent container, ensuring it has a definitive height.

Your implementation might resemble the following structure:

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      height: null
    }
  }

  calculateHeight = () => {
    this.setState({height: null}, () => {
      const height = document.getElementById('div-to-calculate').clientHeight;
      this.setState({ height })
    });
  }

  componentDidMount() {
    this.calculateHeight();
    window.addEventListener("resize", this.calculateHeight);
  }

   componentWillUnmount() {
     window.removeEventListener("resize", this.calculateHeight);
   }


  render() {
    return (
      <div style={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
        <div style={{flex: '0 0 50px', backgroundColor: 'blue'}}>Header</div>
        <div id="div-to-calculate" style={{
          flex: '1 0 auto',
          height: this.state.height ? `${this.state.height}px` : null
        }}>

          <div style={{ display: 'flex', height: '100%' }}>
            <div style={{ flex: '1 0 auto', backgroundColor: 'yellow' }}>
              <div style={{
                textAlign: 'center',
                width: '250px',
                margin: '0 auto',
                border: '1px solid black',
                position: 'relative',
                top: '50%',
                transform:'translateY(-50%)'
              }}>
                Middle Section
              </div>
            </div>
          </div>
        </div>
        <div style={{ flex: '0 0 50px', backgroundColor: 'blue'}}>Footer</div>
      </div>
    );
  }
}

The young ones whose height is 80% that of their taller parent's

Achieving the Desired Height

The Layered Layout Issue

View the Problem on FiddleJS

Technical Analysis

Code Snippet (Same as in FiddleJS)

Update v1

Update v2

Answer №1

EDIT

Answer №2

Answer №3

Optimizing React Components

Similar questions

Angular does not adhere to globally defined styles

Using jQuery to create a draggable element with a visual indicator that represents a link between two items

Is there a way to create a table that has varying columns for each row?

"Using Node.js for proxying requests and implementing OAuth authentication

What are the best ways to maximize a web worker's ability to handle multiple tasks at once

I am seeking assistance with my code. It is passing most of the test cases, but is failing only two without any error messages. What could

CSS - Creating a stylish break line for link boxes

What is the best way to retrieve the file name from the current document's URL using JavaScript?

Oops! The regular expression flag "ajax" in Javascript is not valid and is causing

Bootstrap 4 content block alignment explained

Resend the octet-stream data from an external API

Querying MongoDB with a JavaScript file for formatting datetime values

What exactly is the role of the @altfontfamily variable in Bootstrap?

A guide to determining the dimensions (width, height, length) of a mesh using THREE.js

Steps to create a floating navbar using tailwindcss

Refresh a specific portion of an HTML template following a successful AJAX request

How can I create spacing between squares in an HTML div element?

Setting the z-index for a JavaScript plugin

Show JSON data as choices in a dropdown menu

Adjust the translateZ value according to the dynamic height of the element