Children elements in Safari have a height that exceeds that of their parent element

I am facing an issue with the layout of my div elements. Here is how they are structured:

<div class="parent">
   <div class="header"></div>
   <div class="content"></div>
</div>

The height of .parent is set to 100%. The height of .header is 50px. The height of .content is also set to 100%.

While this layout works fine in Chrome, I am encountering a problem in Safari where the heights of .content and .header exceed the height of .parent.

For instance, when .parent is 600px tall, the heights of .header and .content are being displayed as 700px.

I have attempted using calc(100% - 50px) to adjust for this discrepancy in Safari, but it causes the .content height to be shortened in Chrome.

If anyone can provide guidance on resolving this issue, I would greatly appreciate it. Thank you.

htmlcsssafari

Answer №1

Refrain from typing 'cal', it should be 'calc'. This does not seem to be an issue as the content is set to 100% height, equalizing it with the parent and adding the height of the header, resulting in both .content and .header having a greater height compared to the parent.

To see calc in action, visit this link: https://codepen.io/adrianrios/pen/OmRXpE

*{
  box-sizing: border-box;
}
.parent{
  height: 300px;
  width: 50%;
  margin: auto;
  background: pink;
}

.header{
  width: 100%;
  height: 50px;
  border: 1px solid red;
}

.content{
  width: 100%;
  height: calc(100% - 50px);
  border: 1px solid blue;
}

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

Determine the total cost based on the quantity purchased

I created a webpage for employees to select an item from a dropdown menu, and it will automatically display the price of that item. Check out my code below: <script> $(document).ready(function() { $('#price_input').on('change' ...

javascriptjqueryhtml

Converting plain text to HTML in emails using Outlook

Trying to figure out how to maintain the formatting of plain text email while displaying as virtual plain text in C sharp, specifically when receiving in Outlook 2007 with VSTO. The current code is not preserving the original formatting, instead it changes ...

c#htmlvisual-studio-2010emailvsto

Finding the variance in the given situation is as simple as following these steps

To find the variance between the "Total Marks" in a question and the input texts for each answer, we need to consider specific scenarios. Firstly, if a question has only one answer, the text input should be displayed as readonly with the same value as the ...

phpjavascriptjqueryhtml

What is the technique for modifying the Bootstrap 4 navbar button icon color?

I am currently working on a Bootstrap website where the hamburger toggler appears when the screen size is less than 992px. The code snippet for this feature is shown below: <button class="navbar-toggler navbar-toggler-right" type=&quo ...

csstwitter-bootstrapbootstrap-4

Filtering data in an antd table by searching

Just starting out with React hooks, specifically using TypeScript, and I'm struggling to implement a search filter with two parameters. Currently, the search filter is only working with one parameter which is 'receiver?.name?'. However, I wo ...

javascripthtmlreactjstypescripthtml-table

Discover the power of HTML5 canvas by calculating distances and manipulating objects

I have a distance function that returns a value called distance, such as 15, 10, etc. Here is the function: var Distance = function( other ) { var xd = other.x - this.x; var yd = other.y - this.y; return Math.sqrt( xd * xd + yd * yd ); }; I ...

javascripthtmlcanvas

What is the solution for the error message "Unhandled Runtime Error" with the description "TypeError: videoRef.current.play is not a function"?

I am currently working on implementing custom controls for a video on a Nextjs website. When using a standard HTML <video> component, the code functions as expected and clicking the custom play button successfully plays the video. However, when I swi ...

javascripthtmlreactjsnext.js

AJAX loading footer content before images are fully loaded

I am a beginner when it comes to ajax and I'm facing an issue where the footer loads before the images, causing the images to overlap the footer. The problem is illustrated in the image below. <!doctype html> <html lang="en"> <head ...

javascripthtmljquerycssajax

Is it possible to blend Bootstrap 3.3 with Bootstrap 4.1? I attempted to do so, but unfortunately, it resulted in website

I am currently facing an issue while attempting to integrate both bootstrap and twitter bootstrap simultaneously. Unfortunately, I have been unable to make them work together effectively. Is it even possible for them to be used in conjunction? You can find ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

How do you implement radio button logic within an *ngFor loop?

When I populate options in a form with radio buttons, I am not seeing isChecked set to true when I select an option. Am I missing something in the following Angular code? app.component.html <div class="form-group"> <label>answerOption</la ...

javascripthtmlangulartypescript

Dynamically load directives through the use of ng-repeat

Creating a custom Dropdown menu by wrapping the HTML "select" element in my directive. This directive will display a list of options in the Dropdown menu. The select element is tagged with my custom "arBootstrapSelect" directive/attribute. This directive ...

javascripthtmlangularjs

Is it possible to alter the color of a parent's pseudo-element when it is focused using CSS3?

This situation is quite challenging, and I believe achieving it with plain CSS3 alone is difficult (easier with jQuery, but I'm trying to avoid that). Are there any potential workarounds or hacks? My main goal is for it to be cross-browser compatible ...

csscolorspseudo-element

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

javascriptcsssvghovertooltip

Tips for handling alternate lines with two distinct styles in the Ace editor

I am looking to develop a unique note-taking editor using Ace. For instance, if I paste some Spanish text into the editor, I would like to add English words as notes for corresponding Spanish words. My goal is to display these English words above the resp ...

javascripthtmlace-editor

Display the HTML code in its formatted text output

I am currently facing an issue while trying to take input from the user using the WYSIWYG text editor plugin. When I attempt to display the text in a label or paragraph, all the HTML tags become visible. For instance, @string str = "<b>sample text&l ...

html

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

Placement of the Zend submit button

How can I position the submit button at the bottom of a form wrapped in an HTML table, when calling two forms from the same controller? Currently, the button is stuck between the first form and the table. I attempted to assign the element in my controller ...

phphtmlzend-framework

Tips for crafting a perpetually looping animated shape using canvas

Lately, I've been experimenting with canvas and have encountered a challenge that I can't seem to solve. I've mastered creating shapes, animating them, and looping them across the canvas. However, I'm struggling to figure out how to spa ...

javascriptcsshtmlcanvas

Is there a way to upload an image without utilizing or concealing the `<input type='file' />` element?

Currently, I am developing a PHP script that retrieves the directories and files from specified local computer drives. The goal I am striving for is to enable users to upload an image to my server by clicking on its name from the listing, without using th ...

phphtmlajaxuploadimage-uploading

Interested in the use of hide().after("") function in jQuery?

Check out some code here: html: <body> <p>This is a paragraph.</p> <button>click me</button> </body> Javascript: $(document).ready(function(){ $("button").click(function(){ $("p").hide().after('<p>h ...

javascriptjqueryhtmljquery-after