Резиновый каркас

Scrum · January 4, 2009

скажите что такой реализации не было, что я зря потратил время.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #fff;
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    border: 0;
  }
  #carrier {
    height: 100%;
  }
  #head, #footer {
    background: #404040;
    color: orange;
    height: 35px;
    padding-top: 15px;
    text-align: center;
    position: relative;
  }
  #content {
    height: 100%;
    margin: -50px 0 -50px 200px;
    background: #660000;
    display: table;
  }
  #menu {
    float: left;
    margin: 20px 0;
  }
  .substrate {
        height: 50px;
    }
  /*]]>*/
  </style>
</head>

<body>
    <div id="carrier">
        <div id="head">head</div>
            <div id="menu">
                <ul>
                    <li><a href="#">menu</a></li>
                    <li><a href="#">menu</a></li>
                    <li><a href="#">menu</a></li>
                    <li><a href="#">menu</a></li>
                </ul>
            </div>
        <div id="content">
            <div class="substrate"></div>
                <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus </p>
                <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus </p>
            <div class="substrate"></div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

Victor Ananiev · January 4, 2009

#carrier {

height: 100%;

}

Может min-height? и аналогично для body с html..

Scrum · January 4, 2009

а для еи ?

Scrum · January 4, 2009

чего-то кнопочка редактировать куда то пропала.

Сами понимаете в 7 часов утра не особо хотелось описывать.

Решил реализовать простенький каркас где:

1.хеад и футтер фиксированной высоты (можно то же резиновый но мало где применим).

2.меню и контент занимают оставшуюся часть экрана.

3.футтер всегда прижат к низу.

На сколько помню такой каркас можно было реализовать таблицами в quirk mode, либо с использованием хаков или js

Основные требования:

1.Валидность

2.Кросс под еи 6 и выше, фф, опера, сафари. (в еи 7 и фф 2 не проверял. у кого найдется (время и желание протестить) милости прошу высказываться)

3.Без использования хаков, жс, экспрешен.

немного дополнил.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
html, body {
margin: 0;
padding: 0;
height: 100%;
color: #fff;
font: 12px Verdana, Arial, Helvetica, sans-serif;
border: 0;
}
#carrier {
height: 100%;
}
#head, #footer {
background: #404040;
color: orange;
height: 35px;
padding-top: 15px;
text-align: center;
position: relative;
}
#content {
height: 100%;
margin: -50px 0 -50px 197px;
padding-left: 8px;
background: #660000;
display: table;
}
#menu {
float: left;
width: 200px;
height: 100%;
margin: -50px -3px -50px 0;
background: #D6D6D6;
}
ul {
  list-style-type: none;
}
.substrate {
height: 50px;
}
/*]]>*/
</style>
</head>

<body>
  <div id="carrier">
    <div id="head">
      head
    </div>

    <div id="menu">
      <div class="substrate"></div>

      <ul>
        <li><a href="#">menu</a></li>

        <li><a href="#">menu</a></li>

        <li><a href="#">menu</a></li>

        <li><a href="#">menu</a></li>
      </ul>

      <div class="substrate"></div>
    </div>

    <div id="content">
      <div class="substrate"></div>

      <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus</p>

      <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus</p>

      <div class="substrate"></div>
    </div>

    <div id="footer">
      footer
    </div>
  </div>
</body>
</html>

Victor Ananiev · January 30, 2009

для ИЕ условные комменты, он понимает height как min-height

Scrum · January 30, 2009

для ИЕ условные комменты, он понимает height как min-height

не улавливаю суть.

Victor Ananiev · January 31, 2009

Ну всмысле для контента надо давать min-height а не height ведь если height на 100% окна а контент на пару строк больше, то он вылезет, по этому min-height а для ИЕ height через хак(или условные комменты) так как он пониает height как min-height. Что у меня не так?

Вот без min-height для контейнера:

А вот с ним:

Scrum · January 31, 2009

display: table;

Victor Ananiev · January 31, 2009

хм.... ИЕ его понимает? пошел смотреть..)

denger · March 4, 2009

Вариант работает... но наткнулся на проблему, если в футер вставить картинку по высоте дива - под дивом образуется несколько пикслей белого пространства, при этом появляется прокрутка в обоих браузерах. IE на компе нету, проверял в Opera 9.63, FF 3.

изменение для кода:

css: #head, #footer:

height: 50px;

padding-top: 0px;

Html:

Nekromancer · March 4, 2009

в этой теме токо я заметил нижнюю полосу прокрутки? лол) весело уничтожаем форум)

Scrum · March 16, 2009

скажу больше в ie7 такой фокус вообще не прокатывает, с чем связано пока непонятно.

Sign In

Резиновый каркас

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information