CODEWITHSUNDEEP
htmlcss
DMP
DMP

Reputation: 543

Child div should cover whole area of its parent div

Below is my code

.not-my-div {
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
  border: 1px solid black;
}

.my-div {
  float: left;
  width: 100%;
  height: 100%;
  background-color: aqua;
  opacity: .5;
}
<div class="not-my-div">
  <p>Some Text Here</p>
  <div class="my-div"></div>
</div>

I want my-div should cover whole area of not-my-div.

not-my-div is not in my control so I can't do any thing to it and its width and height is not fixed.

Below is sample what I want.

enter image description here

Upvotes: 2

Views: 3410

Answers (2)

Temani Afif
Temani Afif

Reputation: 273649

You may try using negative margin since you don't have any control of the not-my-div. Of course the negative margin will depend on the size of text inside the p tag :

.not-my-div {
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
  border: 1px solid black;
}

.my-div {
  float: left;
  width: 100%;
  height: 100%;
  background-color: aqua;
  opacity: .5;
}
<div class="not-my-div">
  <p>Some Text Here</p>
  <div class="my-div"></div>
</div>

if you also cannot control the text and it's a dymanic one, you can try a JS solution to get the height of the p tag and apply negative margin like this :

$('.my-div').css('margin-top','-'+$('.not-my-div p').outerHeight(true)+'px');
.not-my-div {
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
  border: 1px solid black;
}

.my-div {
  float: left;
  width: 100%;
  height: 100%;
  background-color: aqua;
  opacity: .5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="not-my-div">
  <p>Some Text Here</p>
  <div class="my-div"></div>
</div>

Upvotes: 0

Pietro Terracciano
Pietro Terracciano

Reputation: 135

Method 1 : Use CSS

If You can "override" partials CSS rules of .not-my-div, do this

.not-my-div {
    position: relative; /** ADD THIS **/
}

.my-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: aqua;
    opacity: .5;
}

If You can't "override" partials CSS rules of .not-my-div but You can move .my-div on top of all paragraphs; do this

<div class="not-my-div">
    <div class="my-div"></div>
    <p>Some Text Here</p>
    <p>Other Text Here</p>
</div>

Edit style as below

.my-div {
    position: absolute;
    width: WIDTH_OF_not_my_div;
    height: HEIGHT_OF_not_my_div;
    background-color: aqua;
    opacity: .5;
}

If You can't "override" partials CSS rules of .not-my-div and You can't move .my-div in .not-my-div; do this

See jQuery

Method 2 : Use jQuery

Using jQuery You will have a dynamic script. If .not-my-div width change, automatically change also for .my-div =)

First of all You need to add jQuery file into HTML code. After launch the jQuery script AFTER page load

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="not-my-div">
    <p>Some Text Here</p>
    <div class="my-div"></div>
</div>

<script>
    /** Launch script AFTER page load **/
    jQuery(document).ready(function ($) {
        $notMyDiv = $('.not-my-div');
        $myDiv = $('.my-div');

        var notMyDivOffset = $notMyDiv.offset(); /** Contains .not-my-div position **/
   
        $myDiv.css('position', 'absolute'); 
        $myDiv.css('top', notMyDivOffset.top);
        $myDiv.css('left', notMyDivOffset.left);
        $myDiv.css('width', $notMyDiv.outerWidth()); /** Take .not-my-div width with border **/
        $myDiv.css('height', $notMyDiv.outerHeight()); /** Take .not-my-div height with border **/
        $myDiv.css('backgroundColor', 'red');
        $myDiv.css('opacity', '0.5');
    
    })
</script>

Upvotes: 2

Related Questions