Munk
-
Posts
4 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Munk
-
Как выглядит код страницы после "преобразования"?
-
Резиновый макет с контентом в центре с полосой прокрутки
Munk replied to Munk's question in HTML Coding
Нашел такое решение, буду пробовать допилить. http://jsfiddle.net/QeW7E/3/ -
Резиновый макет с контентом в центре с полосой прокрутки
Munk replied to Munk's question in HTML Coding
Спасибо, но замысел в том, чтобы #footer фиксированной высоты был прилеплен снизу, а (резиновый с полосой прокрутки) #center находился между #footer и #header. -
Подскажите как реализовать такой макет правильнее? Этот неправильно отображается в старых IE, мобильных браузерах, возможно где-то ещё.. http://jsfiddle.net/QeW7E/ <!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <style> * { margin:0; padding:0} body { width:100%; height:100%; background:#CCC;} #wrapper { width:1000px; height:100%; margin:0 auto;} #header { width:100%; height:200px; position:absolute; top:0; background:#EEE;} #content { width:1000px; position:absolute; top:200px; bottom:200px; background:#999;} .sidebar-left, .sidebar-right {float: left; width: 200px; height: 100%;} #center { width:600px; height:100%; float:left; margin:0 auto; overflow:auto; background:#FFF;} .min_height { min-height:200px;} #footer { width:100%; height:200px; position:absolute; bottom:0; background:#666;} </style> </head> <body> <div id="footer">footer</div> <div id="header">header</div> <div id="wrapper"> <div id="content" class="min_height"> <div class="sidebar-left min_height">sidebar left</div> <div id="center" class="min_height"> <div id="main-content"> м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/> м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/> м<br/>н<br/>о<br/>г<br/>о<br/> р<br/>а<br/>з<br/>н<br/>ы<br/>х<br/> б<br/>у<br/>к<br/>в<br/> </div> </div> <div class="sidebar-right min_height">sidebar right</div> </div> </div> </body> </html>