0

i have tried to make a div height 70% using CSS3's calc() function. However it is not working. When I use viewport height (70vh) then it works, but I need height with 70%.

.scroll-inner-container {
  height: -moz-calc(70vh + 0px);
  height: -webkit-calc(70vh + 0px);
  height: calc(70vh + 0px);
  overflow-y: scroll;
}

.scroll-outer-container {
  position: relative;
  height: 100%;
  background-color: #ededed;
  padding: 0px 20px;
}
<div class="pf_content tab-pane">
  <div class="scroll-outer-container">
    <div class="scroll-middle-container">
      <div class="scroll-inner-container">
        <div class="paragraph-space content">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores consequatur, voluptas aspernatur ducimus sapiente rem quis cumque expedita quia nisi! Labore vel ut veritatis, magnam itaque quibusdam sed nemo, doloribus accusamus voluptatem quae. Delectus
            minima excepturi, voluptatem consequatur voluptatum, in assumenda, harum aperiam fugit doloremque, cupiditate natus animi sed odit! Libero delectus maxime, corrupti quos nisi facilis labore porro consectetur in, quaerat at repellendus perspiciatis,
            dicta placeat. Ullam doloribus reiciendis laborum, similique, inventore culpa. Asperiores tempora debitis voluptatum facere maiores iste fugiat quisquam necessitatibus. Esse impedit similique, iusto. Omnis voluptatibus quo animi a repellendus
            vero modi? Odit tenetur, tempore laboriosam reprehenderit vitae dolorem inventore placeat illo iure dicta iste minima asperiores eos dignissimos, quis et officia sapiente, distinctio animi deserunt voluptatum. Unde quo dolores est id numquam
            perspiciatis consequuntur beatae, optio quia ut explicabo officia nihil itaque quidem adipisci maiores, vitae accusamus. Commodi deserunt id, natus consequuntur tempore. Voluptates adipisci, perferendis ex quae cumque repellendus, cupiditate
            a iste maiores, pariatur fugiat officia voluptatum. Fuga excepturi, at, ut doloribus ipsum quis itaque voluptate repellendus sint vel aut in alias. Repellat aut veritatis aliquid doloribus excepturi quidem quasi at quae provident maxime assumenda
            obcaecati quo aspernatur eaque officia quia minima sapiente alias, omnis laboriosam voluptas! Recusandae, est magni ipsam? Libero illo eos enim porro est, nesciunt tempora ullam vitae at. Repellat dicta molestias suscipit, temporibus architecto
            dolore neque atque cum explicabo illum! Veniam, reiciendis ullam quae distinctio pariatur natus consequuntur repellat soluta, maiores ad eligendi sed. Quisquam officia ut omnis quidem dolores assumenda neque rerum itaque error optio, facere
            pariatur dignissimos maiores delectus natus, illum odit est reprehenderit amet quae voluptas dolor! Sapiente, in quod, ex fugiat at quibusdam. Esse atque nam repudiandae dolorem aut eum enim consequuntur ab aspernatur. Quos reiciendis labore,
            temporibus quae necessitatibus rerum quisquam impedit magni, aliquid itaque, doloribus et nemo totam recusandae dolore. Distinctio, vitae. Reprehenderit a unde ad temporibus blanditiis quaerat itaque nemo dolor aut non delectus, impedit asperiores,
            officia sint natus animi fuga accusamus molestias quos corporis id. Ex facilis labore nesciunt et eius. Impedit harum, itaque nulla beatae ea accusantium quam odit quos, quod veniam quibusdam dolorum voluptas sunt adipisci aliquam quo pariatur
            quisquam, odio. Tempora non ullam delectus asperiores. Dolor, atque? Dolorum repellat facilis impedit laudantium, assumenda adipisci dolorem tempora cum deleniti. Quasi explicabo officia sunt suscipit numquam dolorem pariatur optio blanditiis
            veritatis incidunt harum, labore, odit facilis aliquid repellendus. Obcaecati perspiciatis aperiam ullam non, perferendis unde animi eligendi maiores blanditiis sapiente cum laborum repellendus earum iusto dolor illum aliquid a eius aspernatur
            repudiandae. Unde architecto, magni, eaque iste, numquam dolores omnis dicta quae tenetur ipsum atque dolorum libero. Possimus tempora harum, obcaecati suscipit. Voluptas corporis sint hic quidem pariatur accusantium quia animi iure saepe?
            Molestias atque iusto numquam placeat accusamus labore! Quos eligendi eaque quam magnam quasi quia. Error ullam corrupti possimus expedita, magnam distinctio eius debitis, sequi enim, totam voluptates cumque sunt culpa vitae tempora corporis
            molestiae veritatis tempore consequatur placeat repudiandae. Deleniti deserunt nihil voluptas quae quaerat accusantium provident rerum?
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Muhammad Masudur Rahman
  • 396
  • 1
  • 6
  • 16
  • 2
    For a percentage height to work ***all*** parent elements need to have a `height` defined and set to anything other than the default of `auto`. – Rory McCrossan Oct 01 '17 at 14:26
  • Thank you @RoryMcCrossan . but i didn't get it.if you have time,can you explain it..please... – Muhammad Masudur Rahman Oct 01 '17 at 14:34
  • 1
    Have a look this example https://stackoverflow.com/questions/1622027/percentage-height-html-5-css – Balwant Singh Oct 01 '17 at 14:35
  • 1
    According to @RoryMcCrossan you need to set set certain height to parent "pf_content tab-pane" e.g 400px and then set rest of the decedent child 100% of height and finally set .scroll-inner-container to height: -webkit-calc(70%); this will work – Balwant Singh Oct 01 '17 at 14:46
  • 70% of what? If the parent doesn't have a height then a % of that height is nothing. Also, there's no point in using `calc` in this case. – powerbuoy Oct 01 '17 at 15:27

1 Answers1

0

enter image description here

I have copied your code and calc(70% + 0px) is working.. maybe you have accidentally forgot to put space after and before "+" sign in your code.. if its like this calc(70%+0px) it will not work

just write exaclty like this height : calc(70% + 0px); and it will work

kyun
  • 9,710
  • 9
  • 31
  • 66
Hassam Ahmed
  • 11
  • 1