Один блок в центре страницы и футер всегда внизу

Powerhead · January 26, 2012

Друзья, помогите, пожалуйста.

Задача: блок фиксированных размеров должен быть выровнен по центру страницы (по вертикали и по горизонтали)

Внизу должен быть футер фиксированной высоты, который прилипал бы к низу страницы.

При уменьшении размеров окна футер не должен наезжать на центральный блок - должна появляться полоса прокрутки.

Для наглядности, вот что должно получится:

Уйму вариантов перепробовал, но так чтоб работало в IE 7,8,9, FF, Chrome - не могу сделать.

Буду очень благодарен за советы

dostel1 · January 26, 2012

http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/podval-k-nizu.html

Powerhead · January 26, 2012

За ссылку спасибо, но это не решает проблему.

Проблема в том, что каждую задачу по отдельности выполнить удается, но совместить их - нет

dostel1 · January 26, 2012

ну показуй что ты сделал?

Powerhead · January 26, 2012

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 · January 26, 2012

В принципе, то, что мне нужно, легко достигается таблицей:

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>

Хотелось обойтись без таблиц, но, похоже, придется делать так.

dostel1 · January 27, 2012

может min-height задать?

Sign In

Один блок в центре страницы и футер всегда внизу

Question

Powerhead

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

dostel1

Link to comment

Share on other sites

Powerhead

Link to comment

Share on other sites

dostel1

Link to comment

Share on other sites

Powerhead

Link to comment

Share on other sites

Powerhead

Link to comment

Share on other sites

dostel1

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information