Ways to ensure the child div's border height matches that of the parent div

Question

Ways to ensure the child div's border height matches that of the parent div

I am facing an issue with a child div that has padding. When I add a border-right to the child div, how can I make it full height? Below is the code snippet:

<div class="parent">
  <div class="child">
    <h2>Content</h2>
  </div>
</div>

.parent{
  border: 2px solid black;
}
.child{
  width: 25%;
  border-right: 2px solid red;
}

The current output of my code: https://i.sstatic.net/OidU3.jpg

Desired result: https://i.sstatic.net/96YPz.jpg

I'm new to this, any help would be greatly appreciated. Thank you!

html css

Answer 1

Answer №1

To center the text within a parent div, remove the default margin of the h1 element and use padding instead. Set the child div's height to 100% and adjust the CSS as shown below:

.parent{
  border: 2px solid black;
  height:40px;
}
.child{
  width: 25%;
  height:100%;
  border-right: 2px solid red;
}
h2{
  margin:0;
  padding-top:8px;
}

<div class="parent">
  <div class="child">
    <h2>Content</h2>
  </div>
</div>

Answer 2

To center the text within a parent div, remove the default margin of the h1 element and use padding instead. Set the child div's height to 100% and adjust the CSS as shown below:

.parent{
  border: 2px solid black;
  height:40px;
}
.child{
  width: 25%;
  height:100%;
  border-right: 2px solid red;
}
h2{
  margin:0;
  padding-top:8px;
}

<div class="parent">
  <div class="child">
    <h2>Content</h2>
  </div>
</div>

Answer 3

Answer №2

The issue lies in the fact that the h2 tag inherits default top and bottom margins from the browser. One solution is to reset those margins to zero like this (check example here):

h2 { margin: 0 }

Alternatively, if you prefer keeping the margins, you can set the overflow property of the child's container to hidden:

.child {overflow: hidden;}

For demonstration, consider the following setup:

.parent {
    border: 2px solid black;
}

.child {
    width: 25%;
    overflow: hidden;
    border-right: 2px solid red;
}

<div class="parent">
    <div class="child">
        <h2>Content</h2>
    </div>
</div>

You can view a live demo on JSFiddle.

Answer 4

The issue lies in the fact that the h2 tag inherits default top and bottom margins from the browser. One solution is to reset those margins to zero like this (check example here):

h2 { margin: 0 }

Alternatively, if you prefer keeping the margins, you can set the overflow property of the child's container to hidden:

.child {overflow: hidden;}

For demonstration, consider the following setup:

.parent {
    border: 2px solid black;
}

.child {
    width: 25%;
    overflow: hidden;
    border-right: 2px solid red;
}

<div class="parent">
    <div class="child">
        <h2>Content</h2>
    </div>
</div>

You can view a live demo on JSFiddle.

Answer 5

Answer №3

To ensure that your child element inherits the maximum height from its parent, include the following CSS code snippet in your stylesheet:

.child{
 max-height: inherit;
}

Answer 6

To ensure that your child element inherits the maximum height from its parent, include the following CSS code snippet in your stylesheet:

.child{
 max-height: inherit;
}

Ways to ensure the child div's border height matches that of the parent div

Answer №1

Answer №2

Answer №3

Similar questions

Capture screenshots of the web page URLs within the Chrome browser by utilizing PhantomJS

Refreshing the page after executing a MySQL UPDATE statement

Creating a static HTML page using Flask and incorporating redirects

When the user clicks, retrieve the contents of list p and showcase them in a div

Switching the class for the pseudo-element :after

Are DIV elements really impossible to click using selenium Web Driver?

Reposition and resize an image. Creating a grid layout

Having issues with the CSS block in my Jekyll dropdown navbar

Building web navigation using a combination of HTML, JavaScript, and PHP within a category, sub

Tips for saving values created with JavaScript as an HTML file

Is it possible for a table data cell to be nested within another table

Error: knockoutjs - unable to locate ko

I want to have a video playing in the background of my home page, but when viewers access it on their mobile devices, I would like to display a specific image instead

SCSS: When hovering over one div, display a different div

Trouble with AngularJs 1.x causing Bootstrap4 menu toggle collapse to malfunction

Error in JavaScript Slideshow

Gradient scroll effect for dynamic backgrounds

Definitions that are displayed dynamically when hovering over a particular element

Mapbox map rendering problem in React with 100% high resolution

The vanishing act of CSS divs as you scroll there