Check out this Plunker example.
Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions.
Below is a sample code snippet, while you can view a functional example here:
<!DOCTYPE html>
<html>
<head>
<style>
.plugin {
position: absolute;
z-index: 800;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6);
box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6);
}
.plugin_title {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
font-family: arial;
background-color: #300;
z-index: 150;
height: 20px;
border-bottom: 1px solid whitesmoke;
}
.plugin_canvas {
position: relative;
background-color: black;
border: 1px solid #300;
border-bottom-right-radius: 5px;
z-index: 800;
}
</style>
</head>
<body>
<div class="plugin">
<div class="plugin_title">
<span>Plugin Title</span>
</div>
<canvas width="428" height="348" class="plugin_canvas"></canvas>
</div>
</body>
</html>
The .plugin class div seems to adjust itself to contain the inner elements (.plugin_title and canvas div), but unexpectedly increases by 5 pixels in height.
In the provided example, the calculated height for the title is 21px (20px + 1px border), and for the canvas it's 350px (348px + 2px borders). The total sums up to 371px whereas Developer Tools indicates the parent .plugin height as 376px.
This mismatch is causing the bottom shadow to be misplaced by 5px.
What could be causing this issue? Is there a CSS-only solution to rectify this problem without using JavaScript?
Note: The container div (.plugin) is created before the inner divs. Therefore, setting the height within the container div initially is not viable since the canvas div's height is unknown at that point. While recalculating after creating the inner divs is an option, I'm exploring a solution that doesn't involve script manipulation.