Jump to content
  • 0

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


mogdalov
 Share

Question

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

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

103501704.jpg


<!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;
}

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Grasss
      Имеется div блок (height:50px; width:400px;) 
      При наполнении контентом, высота div'а должна автоматически увеличиваться. 
      Нужен скрипт, который будет выполнять эту задачу.
    • By maxfloyd
      Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)

      Код: https://jsfiddle.net/aemjkhp9/
    • By WhatIsHTML
      Необходимо сделать высоту блоков на скриншоте, одинаковой. Для задания одинаковой высоты у Semantic UI есть классы "equal height". Пример тут http://jsfiddle.net/ozk615p6/35/
      "equal height" задается внешнему блоку, а дочерним элементам будет задана одинаковая высота. Проблема в том, что мне нужно выровнять по высоте не дочерние элементы, по крайней мере не первого уровня вложенности. Моя проблема тут http://jsfiddle.net/ozk615p6/34/
      Помогите пожалуйста.
       

    • By anvar9991
      Не могу решить одну проблему. Как сделать когда браузер увеличивается или уменьшается размер(ширина и высота) изображения не менялся. Как бы он фиксированный.
      Пример http://mahno.com.ua/en/ (первый блок).
       
      У меня с шириной всё нормально, проблема с высотой.
      Мой пример с проблемой http://davronv4.businesscatalyst.com 
    • By kattiperk
      Здравствуйте.
      Проблема в height: auto; для iOS устройств ниже 6 версии.
      В контейнере есть картинка, которая имеет свойства width: 100% и height: auto;
      Но iOS отказывается понимать и тянет на всю высоту, оставляя ширину в порядке. То есть картинку изрядно плющит.
      Нашла пару запросов, но советовали только height: auto !important; С высотой работает через медиа запрос для aspect ratio. Но интересно, может есть заклятье?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy