javascript - 如何在所有设备中根据固定高度缩放 ​​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

使用 flex 盒子。 将您的内容分成 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>

并在其间留出空间来 flex 它。

.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

这就是你想要的吗？