how to scale the #left-content div based on the window height,and i need to display all content inside the fixed #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. Break up your content in 2 divs:
<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. See the pen here: http://codepen.io/anon/pen/vNKQLW?editors=110
Is that what you were after?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.