[英]How to scale div content based on fixed height in all devices
how to scale the #left-content div based on the window height,and i need to display all content inside the fixed #left-bg. 如何根据窗口高度缩放#left-content div,我需要在固定的#left-bg内部显示所有内容。 if i open in mobile or tablet the content is hidden . 如果我在手机或平板电脑上打开,内容将被隐藏。
.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>
Use flexbox. 使用flexbox。 Break up your content in 2 divs: 将内容分为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>
And flex it with space between. 并在两者之间留出空间。
.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 is magic. Flex是魔术。 See the pen here: http://codepen.io/anon/pen/vNKQLW?editors=110 在此处查看笔: http : //codepen.io/anon/pen/vNKQLW?editors=110
Is that what you were after? 那是你的追求吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.