Trying to get a specific layout in HTML with CSS -
this scenario:
i have fixed-positioned div element (lets call 'wrap'). must not overflow margins of 100px window's edges.
inside div reside 3 other divs ('first', 'second', , 'third').
only 'third' div has fixed height , should positioned @ bottom of containing 'wrap' div.
the issue want 'wrap' div occupy less possible height of screen. want shrink height if 'first' , 'second' shown, , scroll 'second' if don't.
i find kind of hard explain, hope can idea. ask me if need clarifications.
i've created pen on codepen can fork , play with.
i can't succeed in achieving without js.
i'll appreciate help... thanks.
you can create custom styles varying screen sizes using @media in style sheet like
@media screen , (max-width: 800px) { #wrapper { width: 90%; min-width: 0; } #column-main { margin-left: 0; } #column-sidebar { width: auto; float: none; } }
visit here better explanation.
Comments
Post a Comment