Двухпанельный сайт - растяжка по вертикали? - PullRequest
Новая
       24

Двухпанельный сайт - растяжка по вертикали?

1 голос
/ 14 декабря 2011

У меня есть этот макет:

Верхняя панель исправлена. Затем я хочу иметь боковую панель на левой панели и правую панель с основным содержанием. Панели разных цветов отделены рамкой.

Проблема в том, что иногда левая панель будет выше, а иногда - выше. Итак, одна панель короче другой (цвет заканчивается, и вы видите белый).

Я пробовал height:100%;, но это работает, только если контент короче высоты браузера.

Как я могу решить эту проблему только с помощью CSS?

Ответы [ 3 ]

4 голосов
/ 14 декабря 2011

Вы можете использовать технику, называемую «искусственные столбцы».Хорошим примером является метод 3 на этой странице , или, как добавил Векс в комментарии ниже, эта ссылка в A List Apart .

0 голосов
/ 14 декабря 2011

Мое решение этой проблемы состоит в том, чтобы обычно вкладывать столбцы так, чтобы один столбец контролировал другой, а затем дать другому фоновое изображение, которое выглядит так, как будто это первое продолжение: 

    <style>
    *{margin:0;padding:0;}
    .main_con{position:relative;margin:0 auto;width:960px;}
    .head_con{position:fixed;top:0;width:960px;height:42px;background:#ff0;}
    .col_con{padding:42px 0 0 0;}
    .left_col{width:360px;margin: 0 15px 0 0;float:left;background: #f60;}
    .right_col{position:relative;float:left;width:960px;background: #f00 url("image that looks like left column continued") repeat-y;}
    .right_col_content{float:left;width:585px;}
    .clr{clear:both;}
    </style>

для HTML: 

    <div class="main_con">
        <div class="col_con">
            <div class="right_col">
                <div class="left_col">
                        <p>left column content pushes right column down</p>    
                </div>
                    <div class="right_col_content">
                        <p>right column content</p>
                    </div>
            <br class="clr" />
            </div>
        </div>
        <div class="head_con">
            <p>head content</p>
        </div>
    </div>

примечание: * {} зачистка предназначена только для примера и должна быть заменена на соответствующий бит зачистки по умолчанию css.

0 голосов
/ 14 декабря 2011

Вы можете попробовать что-то вроде этого.Единственная проблема в том, что вам нужно знать фиксированную высоту, если возможно, чтобы один столбец был больше другого, и нет способа узнать, какой из них будет больше, вам может потребоваться выполнить jquery, чтобы выяснить это.

http://jsfiddle.net/rhoenig/x7NAY/

...