Помогите разобраться! 4 блока, 3 из них фиксированы по высоте, 1 резиновый, не правильно отображается.

mogdalov · June 2, 2013

Помогите разобраться!

Есть 4 блока. Первый, второй и четвертый фиксирован по высоте (height задан в px), а третий блок должен быть резиновым, но при минимальном количестве информации он должен растягиваться так, чтобы футер был самой крайней точкой, как на скриншоте, только без полосы прокрутки. Что не пробовал, никак не могу реализовать.


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

<html>

<head>

<title>123</title>

<meta name="robots" content="index, follow">

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="header">

<div class="logo"><a href="http://flexotex.by"><img src="pic/logo.png" alt="Flexotex"></a></div>

</div>

<div id="navi">

</div>

<div id="maket">

<p>Ну что расскажешь?</p>

</div>

<div id="footer">

</div>

</body>

</html>


body, html {
margin:0px;
padding:0px;
height: 100%;
background:#FDFDFD;
}
#header {
width:900px;
height:64px;
margin:0 auto;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Параметры тени*/
background:#FDD800;
}
#navi {
width:900px;
height:30px;
margin:0 auto;
margin-top:20px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Параметры тени*/
background:#FFFFFF;
}
#maket {
width:900px;
margin:0 auto;
min-height:80%;
/*border: solid 3px black;*/
box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Параметры тени*/
background:#FFFFFF;
/*padding: 10px;*/
margin-top:20px;
}
#footer {
width:900px;
height:50px;
margin:0 auto;
margin-top:20px;
box-shadow: 0 0 10px rgba(0,0,0,0.5); /*Параметры тени*/
background:#FDD800;
}
.logo {
margin-top:10px;
margin-left:10px;
float:left;
}

zlodeev · June 2, 2013

http://jsfiddle.net/6Q7L7/26/ - поправленное решение с хабра

Но ещё придется повозиться, пока не могу сам придумать подходящего решения

mogdalov · June 2, 2013

http://jsfiddle.net/6Q7L7/26/ - поправленное решение с хабра
Но ещё придется повозиться, пока не могу сам придумать подходящего решения

спасибо, тоже буду думать

Sensei · June 3, 2013

Так сойдет? http://jsfiddle.net/sensei/5H8jv/2/ Отступы и высоты сами настроите.

Edited June 3, 2013 by Sensei

mogdalov · June 3, 2013

Так сойдет? http://jsfiddle.net/sensei/5H8jv/2/ Отступы и высоты сами настроите.

Спасибо за то, что вы есть!

Sign In

Помогите разобраться! 4 блока, 3 из них фиксированы по высоте, 1 резиновый, не правильно отображается.

Question

mogdalov

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

zlodeev

Link to comment

Share on other sites

mogdalov

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

mogdalov

Link to comment

Share on other sites

Join the conversation

Similar Content

Обсуждения

Forums

Important Information