Powerhead
-
Posts
4 -
Joined
-
Last visited
Powerhead's Achievements
Explorer (1/14)
0
Reputation
-
Один блок в центре страницы и футер всегда внизу
Powerhead replied to Powerhead's question in HTML Coding
В принципе, то, что мне нужно, легко достигается таблицей: http://cosmoforum.net/happy/vertical_table.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style> * { margin: 0; padding: 0; } #layout { height: 100%; width: 100%; border-collapse:collapse; } #header { background: #fcddca; height: 100px; } #content { text-align: center; vertical-align: middle; } #footer { background: #cacafc; height: 100px; } .center { width: 400px; height: 200px; background: #319e21; margin: auto; text-align: left; } </style> </head> <body> <table id="layout"> <tr><td id="header">1</td></tr> <tr><td id="content"> <div class="center"> Content </div> </td></tr> <tr><td id="footer">3</td></tr> </table> </body> </html> Хотелось обойтись без таблиц, но, похоже, придется делать так. -
Один блок в центре страницы и футер всегда внизу
Powerhead replied to Powerhead's question in HTML Coding
http://cosmoforum.net/happy/vertical.html Сделал почти так, как нужно. Единственный косяк - если уменьшать высоту браузера, блоки налазят друг на друга. Хотелось бы сделать так, чтоб этого не происходило. Чтобы блоки доходили друг до друга а дальше появлялась полоса прокрутки <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <style> * { margin: 0px; padding: 0px; } html, body { height: 100%; } #main { min-height: 100%; background: #d0fcca; } * html #main { /* хак для ie6 */ height: 100%; /* для ие6, т.к. не понимает min-height */ } #header { background: #fcddca; height: 100px; } #footer { background: #cacafc; height: 100px; margin-top: -100px; } #center { width: 400px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; margin-left: -200px; background: #319e21; } .push_footer { height: 100px; } .push_center { height: 400px; } </style> </head> <body> <div id="main"> <div id="header">Header</div> <div id="center"> Center </div> <div class="push_center"></div> <!-- Распорка для центрального блока --> <div class="push_footer"></div> <!-- Распорка для футера --> </div> <div id="footer">Footer</div> </body> </html> -
Один блок в центре страницы и футер всегда внизу
Powerhead replied to Powerhead's question in HTML Coding
За ссылку спасибо, но это не решает проблему. Проблема в том, что каждую задачу по отдельности выполнить удается, но совместить их - нет -
Друзья, помогите, пожалуйста. Задача: блок фиксированных размеров должен быть выровнен по центру страницы (по вертикали и по горизонтали) Внизу должен быть футер фиксированной высоты, который прилипал бы к низу страницы. При уменьшении размеров окна футер не должен наезжать на центральный блок - должна появляться полоса прокрутки. Для наглядности, вот что должно получится: Уйму вариантов перепробовал, но так чтоб работало в IE 7,8,9, FF, Chrome - не могу сделать. Буду очень благодарен за советы