2017-10-01 22 views
0

私はcalc()機能を使用してdivの高さを70%にしようとしました。しかし、それは動作していません。ビューポートの高さ(70vh)を使用すると機能しますが、高さは70%である必要があります。高さcalc(高さ:70%+ 0px)は動作しません

.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>

+2

高さのために働くために***すべての***親要素は定義され、 'auto'のデフォルト以外のものに設定された' height'を持つ必要があります。 –

+0

@RoryMcCrossanありがとうございました。しかし、私はそれを得ることはできませんでした。あなたが時間を持っていれば、それを説明することができますか。... – Masud001

+1

この例を見てくださいhttps://stackoverflow.com/questions/1622027/percentage-height-html-5-css –

答えて

0

enter image description here

私は多分あなたが誤って "+" 記号の後と前にスペースを入れるのを忘れている...あなたのコードとカルクをコピーしている(70%+ 0PX)働いています(計算値:あなたのコードで...その本カルク(70%+ 0PX)のように、それは

はちょうどこの高さのようなexacltyを書き動作しない場合70%+ 0px)。それは動くでしょう

+0

ありがとう@ハッサム、私はスペースを使用しました – Masud001

+0

私のスクリーンショットをチェックしましたか?私のために働いて..私は自分のコードで自分自身を試してみました –

関連する問題