CSS Footer W / Gradient - не липкий - PullRequest
Новая
       26

CSS Footer W / Gradient - не липкий

0 голосов
/ 30 декабря 2010

То, что хочет мой дизайнер и что я пытаюсь кодировать, это нижний колонтитул, который начинается в нижней части динамического контента (на самом деле, они хотят, чтобы нижний колонтитул начинался ниже области контента примерно до 20 пикселей - но это нечто другое).Дело в том, что у них есть градиент, который они хотят внизу, который расширяется, как и в окне браузера.

Из-за градиента я не могу просто обмануть и объявить цвет окна черным, и если я установлю размер нижнего колонтитула на высоту градиента, я получу полосу прокрутки.Я чувствую, что, должно быть, упускаю что-то невероятно очевидное, но я так долго на это смотрю, просто вижу косоглазие. 

<body>
    <div id = "page">
        <div id = "header">
        </div>
        <div id = "content">
            I am ze content area (for now)
        </div>
    </div>
    <div id = "footer">
        I AM THA FOOTAH<br/> So much cooler than the header these days
    </div>
</body>

body
{
    background-color: grey;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
}

div
{
    display: block;
}

#page
{
    background-color: white;
    margin: 0px auto;
    padding: 0px;
}

#header
{
    background: url("http://kjunek.com/images/header_background.png") repeat-x;
    color: yellow;
    height: 240px;
}

#content
{
    background-color: white;
}

#footer
{
    background: #030a19 url("http://kjunek.com/images/footer_background.png") repeat-x 50% 0%;
    height: 626px;
    overflow: hidden;
    color: white;
}

Вроде как http://roughtech.com/t/oppsticky.html от Делая противоположность CSS Sticky Footer только я хочу, чтобы красный продолжался до нижней части окна с градиентом, который становится черным.

Спасибо!

1 Ответ

0 голосов
/ 31 декабря 2010

удалил мой последний ответ - тоже не работает. В совместимых со стандартами режимах единственным контентом, на который нельзя прокрутить, является контент внутри родительского элемента, который скрыт. И кроме багов это не показано. То, на что я смотрел, было ошибкой IE.

Извините, нет, я не могу сделать в CSS в его нынешнем виде.

Если вам нужно сделать калькуляцию сегодня, вам нужно использовать jquery для получения высоты элементов, а затем рассчитать высоту, необходимую для нижнего колонтитула; И используйте CSS-градиенты http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/, чтобы вы могли перейти от оттенка военно-морского флота к оттенку черного. Я бы не одобрял такой подход, поскольку, когда вы начнете рассматривать все возможные ситуации разрешения, вычисление станет довольно сложным, и я предполагаю, что они могут захотеть изменить высоту в зависимости от разных разрешений.

...