高度计算（高度：70％+ 0px）不起作用[重复]

Question

我尝试使用 CSS3 的 calc() 函数制作 div 高度 70%。但是它不起作用。当我使用视口高度（70vh）时，它可以工作，但我需要使用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>

Answer 1

我已经复制了你的代码并且 calc(70% + 0px) 正在工作..也许你不小心忘记在你的代码中“+”号之前和之前放置空格..如果是这样 calc(70 %+0px) 不行

只需像这样写精确度 height : calc(70% + 0px); 就可以了