Как получить несколько столбцов, которые потребляют 100% высоты, используя загрузчик Twitter?

Я видел много подобных вопросов, но не нашел ответа на то, что я ищу. Дополнительная информация выглядит следующим образом:

  • Я использую Twitter начальной загрузки, поэтому я хотел бы совместимое с ним решение
  • Макет будет выглядеть так. Извините, я не могу встроить изображение, потому что сначала мне нужно 10 очков.
  • Это так близко, как я дошел до сих пор. Проблема в том, что я не могу заставить боковую панель остановиться в нижнем колонтитуле.
  • Мне нужно, чтобы основной контент расширялся так же, как и боковая панель.
  • Боковая панель и основное содержимое имеют два разных цвета и различаются по размеру. Они оба должны распространяться на нижний колонтитул
  • Обратите внимание, что минимальная высота должна быть 100%
  • Нижний колонтитул должен двигаться, если содержимое слишком сильно растет (т. Е. Для его просмотра потребуется прокрутка)
  • Я не хочу использовать JavaScript, но если это потребуется, я не возражаю против решения, если оно постепенно улучшается с помощью JS (я также использую jQuery).
  • Содержимое страницы центрируется по горизонтали с фиксированной шириной
Источник

5 ответов

Решение

Я думаю, что это может быть то, что вы ищете: источник двух колонок.

Основная идея состоит в том, чтобы установить height: 100% на обоих <body> а также <html> а затем убедитесь, что контейнер также занимает всю высоту (через min-height: 100%). Вы можете заметить, что код также содержит обходной путь для IE6, потому что он был изначально написан, когда борьба с IE6 была просто еще одним днем ​​работы.

Это было сделано путем модификации немного более сложного и более часто используемого источника макета святого Грааля.

Источник

С помощью CSS это возможно, но нужны некоторые хитрости.

Вам нужно сделать оба div / столбца очень высокими, добавив padding-bottom: 1000px, а затем "обмануть браузер", думая, что они не такие высокие, используя margin-bottom: -1000px. Это лучше объяснить на примере ниже.

http://jsfiddle.net/mediasoftpro/Ee7RS/

Надеюсь, что все будет хорошо.

Источник

Вы можете попробовать с дисплеем: таблица; для родительского Div и отображения: таблица-ячейка; Child Div для достижения ваших результатов....

см код:-

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  .container {
    background:red;
    width:600px;
    display:table;
  }

  .left {
    background:yellow;
    width:200px;
    display:table-cell;

  }


    .mid {
    background:blue;
    width:400px;
    display:table-cell;


  }

      .right {
    background:green;
    width:200px;
    display:table-cell;

  }



</style>
</head>
<body>
  <div class="container">
    <div class="left">shailender</div>
      <div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
        fff</div>
      <div class="right">afdafaf</div>


  </div>
</body>
</html>

Демо:- http://jsbin.com/ebucoz/13/edit

Подробнее о колонках с равной высотой жидкости и примерами

Источник

Единственный реальный ответ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


<table border="1" height="100%" width="100%">
    <tr>
        <td width="10%">
            left
        </td>
        <td>
            right
        </td>
    </tr>
</table>

Источник

Эй, я думаю, ты хочешь этого

Css

**

.wraper, .header, .footer{
width:80%;
    margin:0 auto;
    overflow:hidden;
    border:solid 2px red;
}
.header{
    height:100px;
    background:green;
    border-color:darkred;
}
.sidebar{
width:20%;
    background:yellow;
    float:left;
}
.content{
width:70%;
    background:pink;
    float:right;
}
.footer{
    height:100px;
    background:blue;
    border-color:black;
}
#container2 {
background: none repeat scroll 0 0 #FFA7A7;
clear: left;
float: left;
overflow: hidden;
width: 100%;
}
#container1 {
background: none repeat scroll 0 0 #FFF689;
float: left;
position: relative;
right: 75%;
width: 100%;
}
#sidebar {
float: left;
left:76%;
overflow: hidden;
position: relative;
width: 20%;
text-align: justify;
}
#content {
    float: left;
    left: 81%;
    overflow: hidden;
    position: relative;
    text-align: justify;
    width: 72%;
}

**HTML

    <div class="header">header bar </div>
    <div class="wraper">
        <div id="container2">
    <div id="container1">
        <div id="sidebar">
            This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text
        </div>
        <div id="content">
           This is dummy text here This is dummy text here This is dummy
        </div>
    </div>
</div>
    </div>
        <div class="footer">Footer bar</div>

Живая демоверсия http://jsfiddle.net/rohitazad/Pgy75/2/

подробнее об этом нажмите здесь http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Источник
Другие вопросы по тегам