Question 392976 in Html Question posted in
Some basic documentation can be found here.

Html – Div not taking height according to the parent container

I am setting the height of the parent container to 70% and inside that I am using two divs but when giving both child div height 100% it is taking the height of the whole container not from the parent container which is 70%

i had tried so much solution but not working.
one thing I want to highlight that I am working on jinja file in using weasyprint library to convert HTML to pdf .

here is the HTML code

 <section class="section-2 border-top-0">
        <div class="box-2 d-flex">
          <div class="left-content">
            <div class="upper-content">
              <div class="d-flex">
                <div class="invoice-info d-flex">
                  <div class="invoice-title">
                    <p><strong>Invoice no</strong></p>
                    <p><strong>Invoice Date</strong></p>
                    <p><strong>Payment Terms</strong></p>
                    <p><strong>Due date</strong></p>
                    <p><strong>Broker name</strong></p>
                  </div>
                  <div class="invoice-value ml-2">
                    <p><strong>:SREI2425-01871</strong></p>
                    <p>:07-Jun-2024</p>
                    <p>:90 days</p>
                    <p><strong>:06-Sep-2024</strong></p>
                    <p>:Direct</p>
                  </div>
                </div>

                <div class="branch-pos text-center">
                  <div class="branch">
                    <p>
                      <strong>Branch:</strong>
                      <br />
                      <span>Ginza Industries Limited (KDC)</span>
                    </p>
                  </div>
                  <div class="place-of-supply">
                    <p>
                      <strong>Place of Supply:</strong>
                      <br />
                      <span>Delhi</span>
                    </p>
                  </div>
                </div>

                <div class="branch-ref-nop text-center">
                  <div class="branch-ref">
                    <p>
                      <strong>Branch Ref:</strong>
                      <br />
                      <span>1</span>
                    </p>
                  </div>
                  <div class="no-of-parcel">
                    <p>
                      <strong>No of Parcel:</strong>
                      <br />
                      <span>8</span>
                    </p>
                    <br />
                  </div>
                </div>
              </div>
            </div>
            <div class="lower-content l-5">
              <div class="buyer-info">
                <p>
                  <strong>Buyer:</strong>
                  <span class="fw-bold">B.K. Enterprises (Delhi)</span>
                </p>
                <p class="mb-1">
                  <strong>Address:</strong>2009, 1st Floor,, Kinari Bazar,
                  Delhi., New Delhi- 110006
                </p>

                <div class="branch-state flex-between">
                  <p class="state"><strong>State:</strong> Gujarat</p>
                  <p class="state-code"><strong>State code:</strong> 24</p>
                  <p class="pan-no"><strong>Phone no: </strong> 9311142406</p>
                </div>

                <div class="branch-info flex-between">
                  <p class="pan-no"><strong>PAN:</strong> AABCG0675P</p>
                  <p class="gst-no"><strong>GST No:</strong> 24AABCG0675P1ZD</p>
                </div>
              </div>
            </div>
          </div>
          <div class="right-content">
            <div class="upper-content d-flex">
              <div class="invoice-qr">
                <div class="qr-img">
                  <!-- <img src="" alt=""> -->
                  qrcode
                </div>
                <div class="bill-no">
                  <p>
                    <strong>E- Way Bill No:</strong> <br /><span
                      >601735889771</span
                    >
                  </p>
                </div>
                <div class="bill-date">
                  <p>
                    <strong>E- Way Bill Date:</strong> <br /><span>
                      07-Jun-2024
                    </span>
                  </p>
                </div>
              </div>
              <div class="eway-bill-qr">
                <div class="eway-qr-img">
                  <!-- <img src="" alt=""> -->
                  qrcode
                </div>
              </div>
            </div>
            <div class="lower-content">
              <div class="irn">
                <p>
                  <strong>IRN:</strong>
                  <span
                    >c40ddf0ee8c2d3a3270b8ed3c0829330125c213123e9b58f2a47a9ad389ec534</span
                  >
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

here is the CSS

          .section-2 {
        height: 17%;
        width: 100%;
        border: 1px solid black;
      }

      .section-2 .left-content {
        width: 65%;
        height: 100%;
      }

      .section-2 .left-content .upper-content {
        height: 55%;
      }

      .section-2 .left-content .lower-content {
        height: 45%;
      }

      .lower-content .buyerinfo {
        border: 1px solid black;
        border-bottom: 0;
        border-left: 0;
        border-top: 0;
      }

      .section-2 .invoice-info {
        border: 1px solid black;
        border-top: 0;
        border-left: 0;
        width: 50%;
        height: 100%;
        line-height: 1.7;
      }

      .section-2 .branch-pos {
        border: 1px solid black;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        width: 30%;
      }

      .section-2 .branch-ref-nop {
        border: 1px solid black;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        width: 20%;
      }

      .branch-pos .branch {
        width: 100%;
        border-bottom: 1px solid black;
        border-right: 1px solid black;
        height: 70%;
      }

      .branch-pos .place-of-supply {
        width: 100%;
        height: 30%;
        border-right: 1px solid black;
      }

      .branch-ref-nop .branch-ref {
        width: 100%;
        border-bottom: 1px solid black;
        height: 70%;
      }

      .branch-ref-nop .no-of-parcel {
        width: 100%;
        height: 30%;
      }

      .section-2 .right-content {
        width: 35%;
        
        border: 1px solid black;
        border-top: 0;
        border-right: 0;
        border-bottom: 0;
      }

      .section-2 .right-content .upper-content {
        height: 65%;
        width: 100%;
      }

      .section-2 .right-content .lower-content {
        height: 35%;
        width: 100%;
      }

      .section-2 .right-content .upper-content .invoice-qr {
        width: 45%;
        height: 100%;
      }

      .section-2 .right-content .upper-content .eway-bill-qr {
        width: 55%;
        height: 100%;
      }

      .section-2 .right-content .upper-content .invoice-qr .qr-img {
        height: 60%;
        border-bottom: 1px solid black;
      }

      .section-2 .right-content .upper-content .invoice-qr .bill-no {
        border-bottom: 1px solid black;
        height: 20%;
      }

      .section-2 .right-content .invoice-qr .bill-date {
        border-bottom: 1px solid black;
        height: 20%;
      }

      .section-2 .right-content .eway-bill-qr {
        height: 100%;
        border-left: 1px solid black;
        border-bottom: 1px solid black;
      }
Tags:

2

Answers


  1. 0

    Try using CSS Flexbox. This will make the children 100% height to their parent.
    Try this approach:

    CSS

.section-2 {
  display: flex;
  flex-direction: column;
}

.section-2 .left-content,
.section-2 .right-content {
  flex: 1;
}

    This will make .left-content and .right-content take up the full height of .section-2.

    Login or Signup to reply.
  2. 0 
    I took one **.container that is in light gray color** and inside I took **parent that is in light blue color and height 70%**, then I took **children in red and height 100%**, so taking from the **parents height 70% == child 100%**


    

    

        body
    {
    background:lightyellow;
    }
    .container
    {
      background:red;
padding:10px;
      height:250px;
      width:250px;
      margin:30px;
      background:lightgray;
    }
    .parent
    {
    height:70%;
    width:90%;
    background:lightblue;
    border:5px solid white;
    }
    .child
    {
    background:red;
    height:100%;
    width:50%;
    }
    

        <div class="container">
      <div class="parent">
        <div class="child">
            Child
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search