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

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

c++ - qgraphicsview horizontal scrolling always has a vertical delta -