Determining the height of a nested div within varying screen resolutions in a hierarchical div structure

I am developing a webpage that contains nested DIVs. My main concern is ensuring that one specific DIV element (with the IDs of first_tab and second_tab) fills the space of its parent element (with the ID of div_korpus) consistently across different screen resolutions and browsers, especially in terms of its height relative to its parent's height.

Currently, I have been using "em" units for measuring the height, which have worked well to some extent. However, at higher screen resolutions, there tends to be excess space below the DIV element. I also attempted using viewport units ("vh"), but encountered similar issues where the entire left panel would shift when certain links were clicked (Ln1, Ln2, Ln3).

I am seeking advice on the most appropriate unit of measurement to use in this scenario to achieve the desired outcome.

Link to JSFiddle Example

HTML/CSS code snippets go here...

htmlcss

Answer №1

Discover the power of the flex-box program!

I had to completely revamp everything you mentioned earlier and start fresh, but this is the direction I suggest you follow.

Avoid using inline styles altogether. All styling should be defined in your stylesheet.

html, body, div, span, h1, h2, p, th, td, a, em, img, strong, ul, li, form, label {
  margin: 0;
  padding: 0;
  border: none;
}
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
html, body, form, #Site {
  height: 100%;
  position: relative;
}
#Site{
  overflow: auto;
  background:#eee;
}
header{
  background:#008000;
  color:#fff;
  font-family:Calibri, sans-serif;
}
header h1{
  padding:10px;
}
...
...
</div>

MASTERING FLEX

The core elements are defined within the classes Flx and Flx1 as highlighted in my answer above. With display:flex, all child elements expand to occupy available space. flex:1 dictates the proportion of space each child element occupies. Here's a fantastic platform to experiment with flex capabilities.

Flexbox playground

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

Adjust the CSS of the currently dragged item using jQuery sortable

I am currently using jQuery-ui sortable and facing an issue with changing the appearance of a dragged item. I would like the text value of the component inside the red background container to be displayed while dragging. Can someone please assist me with t ...

jqueryhtmlcssjquery-uijquery-ui-sortable

Tips for adding style to a group of SVG elements:

I currently have an array of .svg icons, each with unique properties that I need to customize: <svg width="24" height="24" viewBox="0 0 24 24"> ... </svg> import styled from 'styled-components'; import Github from 'assets/git ...

javascriptcssreactjssvgstyled-components

Exploring Unpredictable Motion with HTML5 and Javascript

I am currently diving into the world of HTML5 game development. I want to create a ball that moves randomly on the screen, rather than following a predictable left to right motion. Unfortunately, my current code only allows the ball to move in a set patter ...

javascripthtmlgame-physics

Display/Conceal the UL subelement when selected

I've been struggling to toggle the visibility of some ul checkboxes when their parent is clicked. Despite my best efforts, I just can't seem to make it work! Could someone lend a hand in getting this functionality working? Essentially, I need th ...

javascriptjqueryhtmlwordpresscheckbox

Can a website be created to cater to all screen resolutions, from mobile devices to PCs?

Is it possible to create a website that is flexible and can stretch like elastic rubber, accommodating text, images, videos, JavaScript, and accessible from all web-enabled devices? I envision setting a maximum width of 980px for the site, allowing for a ...

javascriptcssxhtml

What is the most efficient way to write this code?

When I find myself surrounded by a ton of PHP code, instead of exiting PHP I tend to include variables directly within strings like this: echo "This is how I use a ".$variable." inside a string"; However, I wonder if it would be more efficient to actuall ...

phphtml

Unable to set full height in Internet Explorer

I am encountering an issue with displaying divs at 100% height in Internet Explorer. The code works perfectly in other browsers, but for some reason IE is causing me trouble and I'm struggling to find a solution. Here is a snippet of my code: HTML ...

htmlcssinternet-explorer

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

htmlrxmlweb-scraping

Whenever I adjust the zoom on my HTML page, it either scrolls upwards or downwards

Is there a way to prevent the page from scrolling when using zoom-in or zoom-out? I attempted using overflow: hidden in the body, but it did not work. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

htmlcss

Creating a cookie on click event to change the background

I am working on changing the background of a div onclick and storing it with a cookie. However, I am facing some issues with my code. I can't determine if the cookie has been properly set, and I am unsure about changing the background with the value o ...

javascriptjquerycsscookiesbackground

Send the user back to the homepage without the need to refresh the page

When the user clicks "Okay" in my window.prompt, the code below opens a new tab. Is there a way to direct the user to the home page without opening a new tab? if (window.confirm("Do you really want to leave?")) { window.open("./Tutoria ...

javascripthtmlreactjswindowalert

HTML list with padding

I need to display two lists side by side. In one list, I want to insert some space between two li elements (an empty li). For example, I am aiming for something that looks like this: A B A B A A B I tried adding an empty li, which worked ...

htmlcss

Error: Attempting to assign a value to the 'fillStyle' property of a null object in HTML5 Javascript

I've been experimenting with HTML5 canvas and JavaScript to draw shapes. While I can successfully draw shapes directly within the HTML file, I encounter an Uncaught Type Error when attempting to do so through an external JavaScript file. My goal is si ...

javascripthtmlcanvasmethodstypeerror

Tips for avoiding the display of concealed forms on a webpage

Hey there, I'm just starting out with html forms and currently experimenting with Jquery to hide forms upon loading the page. However, I've encountered an issue where some forms briefly appear before hiding after the page finishes loading. Here& ...

javascriptjqueryhtml

Utilize React Material UI Slider to dynamically adjust Border Radius in your web design

Utilizing React Material UI's components like the slider and button is essential for this project. The main objective is to dynamically change the border radius of the button using the value obtained from the slider. However, there seems to be a chall ...

cssreactjsbuttonmaterial-uislider

What is the best way to integrate my custom JavaScript code into my WordPress theme, specifically Understrap?

I am looking to enhance my website with a sticky navbar positioned directly under the header, and I want it to stick to the top of the page as users scroll down. Additionally, I want the header to disappear smoothly as the user scrolls towards the navbar. ...

javascriptphphtmlcsswordpress

Displaying videos in Vue js with full width and height is not working as expected

I am trying to create something similar to this: https://i.sstatic.net/R8VEy.png However, the video does not display in full height and width. Instead, it appears cut off at the edges and I cannot see the controls. I want the video to cover 100% of the ...

htmlcssvue.jssass

What is the best way to add the SO-style <kbd> effect to my presentation made with HTML?

I'm currently utilizing reveal.js to construct an HTML-based presentation. My goal is to incorporate keyboard symbols like the ones found on SO and Github using the <kbd>SPACE</kbd> syntax, resulting in this glyph: SPACE. Despite attempti ...

htmlmarkdownreveal.js

Attempting to retrieve an element by its ID from a div that was dynamically loaded using AJAX

I am having trouble retrieving the value of an element with getElementById from a div that is loaded via ajax. Let me explain: In 'example.php' I have the following JavaScript code: <script type= "text/javascript"> var page=document.getE ...

phpjavascriptjqueryhtmlajax

Execute function prior to redirection of iframe

I have a specific challenge with an iframe on my webpage. I am looking to trigger a function right before the iframe reloads a new page, rather than after it has finished loading. I need this function to be triggered before the iframe redirects to the new ...

javascripthtmliframexhtml