css - How do I make a responsive div with scroll content in HTML? -
i have following code:
/* css */ .phone { height: 100%; width: 40%; overflow: hidden; padding: 0; border-radius: 3%; border: 2px solid red; } .phone .screen { height: 50%; overflow-y: auto; background-color: #c3cee0; } .phone .nav { background-color: black; overflow: hidden; color: white; } <!-- html --> <div class="phone"> <div class="screen"> <p>lorem ipsum...</p> ... <p>lorem ipsum...</p> </div> <div class="nav"> <p>back</p> <p>home</p> <p>menu</p> </div> </div>
i want phone responsive in order enable scroll in div.screen
need set height
of div.phone
. problem red border
going beyond phone's content.
i'd border finish div.nav
ends i'm getting unwanted space. see live demostration.
tl;dr
live demostration.
need set height
(for div.phone
) in order enable scroll
text messages space shown red border. how can make div.phone
(red border) same height of whole content (without space)?
set height using calc().
.phone .screen{ height: calc(100% - 33px); }
33px height of bottom nav.
Comments
Post a Comment