Фоновое изображение, закрывающее окно браузера минус верхний и нижний колонтитул ниже сгиба - PullRequest
Новая
       0

Фоновое изображение, закрывающее окно браузера минус верхний и нижний колонтитул ниже сгиба

6 голосов
/ 25 января 2011

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

  1. Заголовок - всегда отображается над содержимым
  2. Контент - фоновое изображение охватывает всю область контента - этоключевая часть
  3. Sub-footer - информация о содержимом, всегда видимом под ним
  4. Footer - стандартный нижний колонтитул компании, видимый, если высота окна определенного размера, в противном случае необходимочтобы прокрутить вниз, чтобы увидеть его

Как я уже упоминал выше, часть содержимого страницы, возможно, самая сложная часть.Мне нужно большое изображение, чтобы быть на заднем плане, который охватывает всю область.У css-tricks есть превосходное руководство по созданию полных фоновых изображений .Поэтому я надеюсь, что это может быть достигнуто легко.Вопрос в том, как сделать так, чтобы нижний колонтитул оставался внизу, если окно <720px, а нижний колонтитул под ним находится ниже сгиба (вам нужно прокрутить до него).В окне> 720px должны отображаться как нижний, так и нижний колонтитулы без полос прокрутки.

На данном этапе я даже не буду беспокоиться о минимальной высоте, которой должен быть контент (возможно, требуются полосы прокрутки для контента <div> или сделать так, чтобы нижний колонтитул и находился ниже сгиба).

Вот макеты изображений того, чего я пытаюсь достичь:

Первый -окно <720px в высоту, где необходимо прокрутить нижний колонтитул до: <img src="https://i.stack.imgur.com/3pASa.png" alt="<720px tall window where the footer needs to be scrolled to">

Second - окно <720px в высоту, которое было прокручено вниз, чтобы увидеть нижний колонтитул: <img src="https://i.stack.imgur.com/j824l.png" alt="enter image description here">

Наконец- высокое окно> 720px, у которого нет полос прокрутки, потому что все видно: enter image description here

Я использую jQuery, и меня не волнует IE6.Могу ли я добиться этого в CSS?Нужно ли использовать jQuery для динамической настройки?Полные фоны страниц легко сделать с помощью css3, я рад использовать css3 или html5, чтобы делать то, что мне нужно.

1 Ответ

1 голос
/ 25 января 2011

Вы определенно не можете использовать CSS position: fixed, потому что он всегда относится к области просмотра, а не к родительскому элементу.

Что вам нужно сделать, это установить подстроку в качестве фиксированного дочернего элемента«содержание».Для этого вам придется использовать Javascript.

Что-то подобное должно делать то, что вам нужно.Попробуйте изменить переменную высоты в CSS для #content, чтобы вы могли видеть, как она ведет себя с различными уровнями содержимого: 

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style>
    #header {
        height: 50px;
        background-color: #ccc;
        width: 100%;
        margin-bottom: 10px;
    }

    #content {
        position: relative;
        height: 1500px;
        width: 100%;
        background-color: #ccc;
    }

    #subfooter {
        height: 50px;
        width: 100%;
        background-color: #666;
        position: fixed;
    }

    #footer {
        height: 50px;
        width: 100%;
        margin-top: 10px;
        background-color: #ccc;
    }
</style>
<script>
    $(document).ready(function(){

        $(document).scroll(function() {
            position_subfooter();
        });

        var position_subfooter = function() {
            $("#subfooter").css("bottom", "20px");
            if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) {
                $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20));
            }
        }
        position_subfooter();
    });
</script>
</head>
<body>
    <div id="header">
        <h1>HEADER</h1>
    </div>
    <div id="content">

    </div>
    <div id="subfooter">
        <h2>SUB FOOTER</h1>
    </div>
    <div id="footer">
        <h1>FOOTER</h1>
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...