Резиновая вёрстка: Шапка в пикселях, контент высотой 100% и футер тоже в пикселях

CrazyFrog · October 22, 2011

Хочу сделать макет с фиксированной шапкой, 100% контентом и фикс. футером и чтобы всё вмещалось на страницу без прокрутки (если мало контента), но прокрутка всё же немного появляется. В чём может быть дело друзья? Заранее спасибо! =)

Ссылка

HTML


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
</head>
<body>
<div id="header">
<div id="phonemail"></div>
</div>
<div id="menu">
</div>
<div id="wrapper">
<div id="main">
<div id="info">
<div id="welcome"></div>
<div id="left">
</div>
<div id="left1">
<p></div>
<div id="right">
</div>
</div>
<div id="portfolio">
<div id="last"></div>
<div id="mainbox">
<div class="lines"></div>
</div>
</div>
</div>
<div id="footer">test</div>
</div>
</body>
</html>

CSS


body, html {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    height: 100%;
	width: 100%;
	color: #0D2D63;
	margin:0;
	padding:0;
}

a img {
    border: 0	
}

/*#all {
	min-height: 100%;
	position:relative;
	min-width:970px;
    width: expression(document.body.clientWidth > 950? '100%': '950px');

}*/

#wrapper {
position: absolute;
width: 100%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYmFjNmQyIiBzdG9wLW9wYWNpdHk9IjAuNyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmFjNmQyIiBzdG9wLW9wYWNpdHk9IjAuMTUiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(-45deg, rgba(186,198,210,0.7) 0%, rgba(186,198,210,0.15) 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(186,198,210,0.7)),                
   color-stop(100%,rgba(186,198,210,0.15)));
	background: -webkit-linear-gradient(-45deg, rgba(186,198,210,0.7) 0%,rgba(186,198,210,0.15) 100%);
	background: -o-linear-gradient(-45deg, rgba(186,198,210,0.7) 0%,rgba(186,198,210,0.15) 100%);
	background: -ms-linear-gradient(-45deg, rgba(186,198,210,0.7) 0%,rgba(186,198,210,0.15) 100%);
	background: linear-gradient(-45deg, rgba(186,198,210,0.7) 0%,rgba(186,198,210,0.15) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3bac6d2', endColorstr='#26bac6d2',GradientType=1 );
}

#header {
	height: 90px;
	width: 100%;
}

#menu {
	height: 30px;
	width: 600px;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
}

.menubox {
	float: left;
	height: 23px;
	width: 150px;
}	



#phone {
	height: 90px;
	width: 90px;
	background-image: url(img/phoneblue.png);
	float: left;
}	

#phone1 {
	background-image: url(img/number.png);
	float: left;
	height: 20px;
	width: 170px;
	margin-top: 35px;
	margin-bottom: 35px;
}

#mail {
	height: 60px;
	width: 60px;
	background-image: url(img/mail.png);
	float: left;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
}	

#mail1 {
	width:110px;
	height:20px;
	background-image: url(img/mail1.png);
	float: left;
	margin-top: 35px;
	margin-bottom: 35px;
	margin-left: 10px;
}

#main {
	width: 100%;
	height: 100%;
}

#info {
	float: left;
	width: 56%;
}

#portfolio {
	height: 600px;
	width: 44%;
	float: left;
}

#welcome {
	height: 34px;
	width: 301px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
}

#last {
	height: 30px;
	width: 179px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;

}

#left {
	width: 45%;
	float: left;
	margin-left: 3%;
	margin-top: 30px;
	text-align: left;
	padding: 5px;
}

#left1 {
	width: 42%;
	float: left;
	margin-left: 3%;
	margin-top: 30px;
	text-align: left;
	padding: 5px;
}

#right {
	height: 40%;
	width: 42%;
	float: left;
	margin-left: 3%;
	text-align: left;
	padding: 5px;
}

#mainbox {
	width: 360px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.lines {
	height: 54px;
	width: 360px;
	margin-top: 20px;
}

#footer {
	height: 30px;
	width: 100%;
	text-align: center;
	font-size: 12px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #D5E1FF;
	line-height: 30px;
	position:absolute;
	bottom:0

}

Edited October 22, 2011 by CrazyFrog

CrazyFrog · October 22, 2011

И обязательно ли вставлять шапку во wrapper, или необязательно?

Softlink · October 22, 2011

CrazyFrog, очевидно же, что у вас перебор с высотой. Вы задали wrapper'у 100% и шапка у вас имеет свою высоту, отсюда и скролл.

CrazyFrog · October 22, 2011

CrazyFrog, очевидно же, что у вас перебор с высотой. Вы задали wrapper'у 100% и шапка у вас имеет свою высоту, отсюда и скролл.

А как сделать чтобы его не было? Чтобы шапка занимала 130px, а wrapper всё оставшееся место?

Softlink · October 22, 2011

CrazyFrog, очевидно же, что у вас перебор с высотой. Вы задали wrapper'у 100% и шапка у вас имеет свою высоту, отсюда и скролл.
А как сделать чтобы его не было? Чтобы шапка занимала 130px, а wrapper всё оставшееся место?

Пардон, я ошибся в первом сообщении. У вас задана высота не врапперу, а вложенному в него блоку. Есть ощущение, что вы придумываете велосипед. Какую структуру вы хотите получить?

Из примеров макетов выложенных здесь, вашего нет?

CrazyFrog · October 22, 2011

Softlink, нет. Мне нужна такая структура:

Шапка высотой 130 пикселей.

После неё идёт самый главный блок wrapper с высотой 100%. Причём высота 100% - 130px шапки.

Во wrapper вложен футер и он всегда прижат к низу при любом заполнении контента.

Всё это должно вмещаться в окно браузера, а прокрутка появляется только тогда, когда добавляется контент.

Edited October 22, 2011 by CrazyFrog

CrazyFrog · October 23, 2011

Разобрался. Тему можно закрывать.

Sign In

Резиновая вёрстка: Шапка в пикселях, контент высотой 100% и футер тоже в пикселях

Question

CrazyFrog

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

CrazyFrog

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

CrazyFrog

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

CrazyFrog

Link to comment

Share on other sites

CrazyFrog

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information