如何在所有設備中基於固定高度縮放div內容

Question

如何根據窗口高度縮放＃left-content div，我需要在固定的＃left-bg內部顯示所有內容。 如果我在手機或平板電腦上打開，內容將被隱藏。

 .left-bg{ background-color:red; position:fixed; width:50%; height:100%; } .left-content{ color:#fff; } 

 <div class="left-bg"> <div class="left-content"> bla bla bla adsfjdhasgfkjsdgf jkdgaskhfasdkfhjl dasfghfdkajsfdkasf jghdasfkjghfkgf dajshgfkasdjgfs adsfjdhasgfkjsdgf<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> jkdgaskhfasdkfhjl dasfghfdkajsfdkasf jghdasfkjghfkgf dajshgfkasdjgfs adsfjdhasgfkjsdgf jkdgaskhfasdkfhjl dasfghfdkajsfdkasf jghdasfkjghfkgf dajshgfkasdjgfs adsfjdhasgfkjsdgf jkdgaskhfasdkfhjl dasfghfdkajsfdkasf jghdasfkjghfkgf </div> </div> 

Answer 1

使用flexbox。 將內容分為2個div：

<div class="left-bg">
  <div class="left-content-top">
    bla bla bla
    adsfjdhasgfkjsdgf
    jkdgaskhfasdkfhjl
    dasfghfdkajsfdkasf
    jghdasfkjghfkgf
    dajshgfkasdjgfs
    adsfjdhasgfkjsdgf</div>
   <div class="left-content-bottom">
    jkdgaskhfasdkfhjl
    dasfghfdkajsfdkasf
    jghdasfkjghfkgf
    dajshgfkasdjgfs
    adsfjdhasgfkjsdgf
    jkdgaskhfasdkfhjl
    dasfghfdkajsfdkasf
    jghdasfkjghfkgf
    dajshgfkasdjgfs
    adsfjdhasgfkjsdgf
    jkdgaskhfasdkfhjl
    dasfghfdkajsfdkasf
    jghdasfkjghfkgf
    </div>
</div>

並在兩者之間留出空間。

.left-bg{
background-color:red; 
  position:fixed;
  width:50%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;

}
.left-content{
color:#fff; 

}

Flex是魔術。 在此處查看筆： http : //codepen.io/anon/pen/vNKQLW?editors=110

那是你的追求嗎？