Как заставить левую границу работать до конца страницы? - PullRequest
Новая
       6

Как заставить левую границу работать до конца страницы?

0 голосов
/ 27 августа 2011

Я хотел бы оформить свою страницу так, чтобы содержимое находилось посередине и имело желтую рамку слева, проходя сверху вниз страницы.

В настоящее время я могу только заставить его перейти на дно с помощью px или при помощи наследования, заставив его остановиться до конца моих данных. Следующий код не работает. 

.content{ min-height:100%;}
html{ height:100%;}

Полный код: 

html
{
    font-family: Segoe UI, Verdana, Sans-Serif;
    background-image:url('../Images/tile.jpeg');         
}

.content
{ 
    width:700px;
    margin:auto;
    padding-left:5px;    
    background-color:White;
}

.button
{
    font-family: Segoe UI, Verdana, Sans-Serif;
    height: 25px;
    width: 160px;
}

Как мне заставить его работать до конца полной страницы?

Спасибо!

Ответы [ 4 ]

1 голос
/ 27 августа 2011
  • Использование фонового изображения для страницы с позиционированием фона
  • Исследуйте "css полной высоты" и посмотрите на http://peterned.home.xs4all.nl/examples/csslayout1.html
0 голосов
/ 05 сентября 2011

Был забытый div. Добавлен div в CSS со 100% высотой и BAM!

0 голосов
/ 27 августа 2011

Используя CSS, попробуйте это 

<style type="text/css">
#blah{
    border-left-width:Xpx;
    border-left-color:#xxx;
    HERE add all the code for
    content
    }
</style>

, где blah - это идентификатор вашего div, тега абзаца и т. Д., И вам, конечно, придется настроить ширину и цвет.

РЕДАКТИРОВАТЬ css был отредактирован, попробуйте это, но вместо создания div для вашей границы, добавьте это в div содержимого, который должен иметь высоту 100% или минимальную высоту 100%.Дайте мне знать, как это происходит.

0 голосов
/ 27 августа 2011

В зависимости от желаемой поддержки браузера, вы всегда можете просто добавить min-height:100%; к вашему контенту div.

Если вы не возражаете против использования JavaScript, вы также можете добавить простой фрагмент для установки height:100%;, если высота контейнера содержимого меньше высоты окна.

JQuery: 

$(function(){
    if($('#content').height() < $(window).height())
    {
        $('#content').css('height','100%');
    }
});

Демо: http://jsfiddle.net/gBtTf/

...