The percentage height setting for a div is not functioning properly, but setting the height in pixels or viewport

Within a dialog box body, I am attempting to display a table and have applied a CSS class to the wrapping div. When specifying the height in pixels or viewport height units, it works as expected. However, when using a percentage like 50%, the height of the table div does not adjust accordingly and ends up rendering at 100%.

I understand that percentages are calculated based on the parent element, but I'm confused why it's not taking into account the height of the parent element, especially since I have a CSS class applied to the dialog box which is set to be 95% of the screen size.

.dialogbox{
   width: 95%;
   height: 95%;
}

.table-height {
    height: 50%;
}

When using a percentage for the height, the content renders at full size rather than the specified 50%.

javascripthtmlcssecmascript-6

Answer №1

yo.chen mentioned the importance of adding body, html { height: 100% }. This is necessary because your parent element is also using percentage as its unit, so it requires a defined height from its parent as well. By applying the height on html, body (to account for browser discrepancies), you can establish a base height using the window height for the rest of the document.

Answer №2

In case your dialog box is positioned under the body tag, you should include the following code:

body, html { height: 100% }

Answer №3

Adjust the parent element's height to vh measurement and the issue should be resolved. By setting the parent element to vh, the inner table can accurately determine its height based on the parent container.

.dialogbox{
   width: 95%;
   height: 95vh;
}
.table-height {
    height: 50%;
}

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

Warning: Update state in React-router-redux after redirection

I am currently developing an admin app for a project using react, redux, react-router, and react-router-redux. The version of react-router I am working with is v4.0.0, while react-router-redux is at v5.0.0-alpha.3 (installed with npm install react-router-r ...

javascriptreactjsreact-routerreact-reduxreact-router-redux

Retrieve all HTML elements, including their closing tags, from a file with Java, without relying on external libraries such as Jsoup

Recently, I've been working on a piece of code that reads an HTML file, extracts all the opening HTML tags, and displays them. However, I have been thinking about how to also include the closing tags in the output. At the moment, the code prints: < ...

javahtmlregexfile-io

ReactJS encountered an error of type ERR_INVALID_ARG_TYPE

Hello there! I recently purchased a template from ThemeForest and everything was working perfectly with the previous version. However, upon updating to the new version, I encountered an error that looks like this: > TypeError [ERR_INVALID_ARG_TYPE]: Th ...

javascriptreactjs

The name field in the request body is currently undefined

Currently, I am working on developing a basic blog page using technologies such as ejs, JavaScript, Node.js, Express, and body-parser. While working on passing inputs to the command line, specifically for the title, I encountered an issue. When I used req ...

javascriptnode.jsexpressbody-parser

How can I enable the "edit" function for a button within a list item?

I am currently working on a feature that allows users to edit list rows by clicking a button. However, I am facing an issue where the "edit" button only edits the first row instead of the matched line. This functionality is part of a program I am developi ...

javascripthtml

Difficulty sending a parameter to the onClick function of a React Button

I'm struggling with passing parameters to my callback function when clicking a material-ui button. Unfortunately, the following approach is not yielding the expected results. const fetchData = async (param) => { } <Button onClick={fetchData(&a ...

javascriptreactjsmaterial-ui

Determine whether a specific text is contained within a given string

Can someone help me determine if a specific text is included in a string? For example, I have a string str = "car, bicycle, bus" and another string str2 = "car" I need to verify if str2 exists within str. I'm new to JavaScript so I appreciate you ...

javascript

Is it possible to convert an image into text using CSS just for the purpose of printing

Imagine having a prominent banner at the top of a webpage that you want to print. Instead of depleting someone's ink by printing the entire banner image, is it possible to utilize CSS to substitute the image with text in H1 size? ...

cssimagetextheaderprinting

Adjust the size of the Google custom search bar to suit your preferences

I am looking to adjust the height of the Google custom search bar, and while there are various styling options available through the Google custom search editor, none specifically cater to changing the height. Currently, the search bar includes top and bo ...

htmlcsssearch

Breaking down objects or arrays to extract specific values in React components

Some articles recommend using ES6 destructuring for React props & state as a best practice. For example: const { showModal, hideModal } = this.props; While I understand the benefits of cleaner code, I recently discussed with another developer who suggest ...

javascriptecmascript-6

Updating JSON in JavaScript

I am striving to structure a JSON object in the following manner: {"tokenId":1,"uri":"ipfs://bafy...","minPrice":{"type":"BigNumber","hex":"0x1a"},"signature":"0 ...

javascriptnode.jsjson

What is the best way to access a specific element within a component from a different component?

Seeking assistance with communication issues between React components. I have a Container component containing child components Contact, More, and About for a single-page website. Each child component has a reference set. The problem arises when trying to ...

javascripthtmlreactjs

Utilizing multiple instances of date picker components in React.js

Is there a way to update the date on react-datepicker when using multiple instances of the datepicker component? I have encountered an issue with this. Here is the code for the Date picker Component: <DatePicker selected={this.state.from} onChange ...

javascriptreactjsdatepickerreact-datepicker

I ran into an issue trying to generate a React app using the command "npx create-react-app" and was unable to proceed

When I attempted to run the command npx create-react-app my-app, I encountered an error: (ps: I also tried running npm init and npm install create-react-app before executing the aforementioned command, but still got the same error.) HELP! Installing pack ...

javascriptreactjsnpmnpx

Execute JavaScript function after completion of CSS animation using jQuery

I'm working on an accordion feature that uses CSS animation to expand the clicked item. The expansion is triggered by li:target. However, I'm facing an issue where when clicking on an item, the scroll position doesn't align correctly with t ...

javascriptjquerycss-transitions

Looking for guidance on implementing explicit waits in Protractor for non-angular applications

I have noticed that automating non-angular applications with Protractor can be challenging. Currently, I am using some methods to add an explicit wait to my existing Serenity click and enter functions. However, I am curious if there is a way to automatic ...

javascriptangularjsangularprotractor

Creating a mobile-friendly layout with 3 columns: Tips and tricks

I attempted to solve the issue independently but didn't have much success. My goal is to create a proper version for mobile users using bootstrap, however, it currently looks terrible on mobile devices. I suspect the problem lies with the div classes ...

htmltwitter-bootstrapcssmobile

I'm having trouble aligning this div in the center of the screen. It looks like the position is slightly off

<!DOCTYPE html> <html> <head> <style> body { background-color: #7a64fa; } .container { background-color: #ffffff; position: fixed; top: 50%; left: 50%; margin-top: -50px; ...

htmlcss

Adjust the CSS styling to ensure that the div or iframe expands to fit the entire height of the

Having trouble making a map embedded via an iframe on a WordPress page display responsively at full height independent of the device? Check out: . To clarify, by full height, I mean that the bottom of the map should not extend beyond the screen, eliminati ...

htmlcss

Changing the row property value of a textarea dynamically based on text input in ReactJS

Here is what I have tried: <textarea rows='2' onChange={e => setSomething(e.target.value)} className='form-control text-area ' value={something} placeholder='write something'> </textarea> output: Expected ...

javascriptreactjstypescript