Как бы вот так сверстать кто знает?

eVErl@Sting · February 3, 2011

Смотрите рисунок, шапка и подвал фикс, центр 100%, за пределы браузера не чего уходить не должно, центр должен прижимать подвал к низу браузера и шапку к верху, вариант с абсолют ботумом для подвала не катит. Вертикальной прокрутки быть не должно.

Я сам позаморачивался и у меня не чего не вышло. В теории думаю что тут нужен какой то java скрипт который определял бы размеры браузера пользователя и подгонял бы под это высоту центра..так как если просто 100% высоту задать центру, то браузер примет за 100% всю высоту окна браузера без вычета из нее размера шапки и подвала.

Vlad · February 3, 2011

Если центр будет фиксирован а большой контент внутри него прокручиваться, т.е. нечто вроде фреймов хочется сделать, то реализуется легко. Разве что с IE6 повозиться придется, если он нужен.

Mavrun · February 3, 2011

http://shublog.ru/html-and-css/kak-prizhim...hasti-brauzera/

что касается фикс подвала и шапки, то задаёшь ширину блокам и margin: 0 auto;

eVErl@Sting · February 4, 2011

Mavrun

Ты не правильно понял задачу..

Dagor · February 4, 2011

а в ксс для каждого блока прописать стили не дано?))) там ведь просто делается : header {height:200px}, main {height:100%}, footer {height:200px}.

Kaktotak · February 4, 2011

а в ксс для каждого блока прописать стили не дано?))) там ведь просто делается : header {height:200px}, main {height:100%}, footer {height:200px}.

Верно подмечено :)

Либо другой вариант если требуется уместить всё на одной странице без Y-скроллинга

header{
height:200px;
margin:0 0 -200px;
}
main{
height:100%
}
footer{
height:200px;
margin:-200px 0 0;
}

safiullin.at · February 5, 2011

eVErl@Sting, зачем увешивать сайт лишними скриптами?

Чем вас такой вариант не устраивает?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf8">
<meta name="author" content="admin">

<title>Page Title</title>
<style>
html, body
{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#main
{
  position: relative;
  left: 50%;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  width: 900px;
  margin: 0 0 0 -450px;
  background: #FF8000;
}

#header
{
  height: 200px;
  background: #FF8080;
}

#distance
{
  height: 200px;
}

#footer
{
  position:relative;
  left: 50%;
  height: 200px;
  width: 900px;
  margin: -200px 0 0 -450px;
  background: #80FFFF;
}
</style>
</head>

<body>

<div id="main">
  <div id="header">
    #header
  </div>
  <div id="content">
    #content
  </div>
  <div id="distance"></div>
</div>
<div id="footer">
  #footer
</div>

</body>
</html>

Кроссбраузерное решение, работает во всех браузерах, начиная с IE 5.5!

Все просто как грабли! Возникнут вопросы, задавайте

P.S: Я вообще не сторонник яваскриптов, и все что можно сделать без их использования, предпочитаю делать без всяких скриптов.

Edited February 5, 2011 by safiullin.at

fan · February 6, 2011

safiullin.at у меня осёл открыл с обоими полосами прокрутки, в опере нормально.

ослу в боди вот это надо ставить, иначе вертикальная прокрутка всё равно будет, scroll="no"

safiullin.at · February 6, 2011

safiullin.at у меня осёл открыл с обоими полосами прокрутки, в опере нормально.
ослу в боди вот это надо ставить, иначе вертикальная прокрутка всё равно будет, scroll="no"

А я для тестирования страниц в IE использую программу IETester, в ней собраны все версии IE и в ней все отлично отображалось. Теперь буду знать, что полностью доверяться этой программе нельзя.

Но все же способ рабочий.

Edited February 6, 2011 by safiullin.at

Sign In

Как бы вот так сверстать кто знает?

Question

eVErl@Sting

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Mavrun

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

Dagor

Link to comment

Share on other sites

Kaktotak

Link to comment

Share on other sites

safiullin.at

Link to comment

Share on other sites

fan

Link to comment

Share on other sites

safiullin.at

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information