Нижний колонтитул под фиксированными divs

У меня в настоящее время возникают трудности с тем, чтобы нижний колонтитул моего веб-сайта работал правильно. Я думаю, что это из-за моих фиксированных позиционированных заголовков и контейнеров, но мне нужно, чтобы они фиксировались, чтобы оставаться на вершине при прокрутке. Я не уверен, как принять это во внимание, если нижний колонтитул появится внизу, когда контейнер div пуст.Нижний колонтитул под фиксированными divs

HTML: -

<body> 
     <div id="wrapper"> 
     <div id="header"> 
      <div id="headerContent"> 
      </div> 
     </div> 
     <script> 
      $(document).ready(function() { 
        $('#container').css('marginTop', $('#header').outerHeight(true) + $('#navbar').outerHeight(true)); 
      }); 
     </script> 
       <div id="navbar"> 
        <div id ="navbarContent"> 

       </div> 
     </div> 
     <div id="container"> 
     </div> 
     <div id="footer"> 
     <div id="footerContent"> 
     </div> 
     </div> 
</div> 
    </body> 
</html>

CSS: -

#container{ 
    width:960px; 
    margin:auto; 
    overflow:hidden; 
} 

#wrapper{ 
    min-height:100%; 
    position:relative; 
} 


#navbar{ 
    width:100%; 
    height:40px; 
    margin:auto; 
    background-color:#4e8885; 
    position:fixed; 
    top:120px; 
    padding:0px; 
} 

#header{ 
    width:100%; 
    height:120px; 
    margin:auto; 
    background-color:#8bbcba; 
    position:fixed; 
    top:0px; 
} 

#footer{ 
    width:100%; 
    min-height:20px; 
    margin:auto; 
    background-color:#8bbcba; 
    position:absolute; 
    bottom:0; 
    left:0; 
}

источник

2013-04-01 user1060187

У вас есть страница с примером, где это не работает в Интернете? –

Вы хотите, чтобы нижний колонтитул оставался фиксированным, как панель инструментов в нижней части экрана, или вы хотите, чтобы она подтягивалась под любой контент? –

@PeterFeatherstone Нет, я бы хотел, чтобы нижний колонтитул соответствовал нижней части страницы, поэтому вам не нужно прокручивать ее, если у контейнера нет содержимого, например – user1060187

В вашем примере с использованием фиксированных высот, это не нужно, чтобы динамически вычислять поля. Вы должны просто установить поля container в соответствии с итоговыми значениями ваших верхних и нижних колонтитулов для margin-top и margin-bottom соответственно. См. Этот jsFiddle: http://jsfiddle.net/9Jdrr/

Если вам нужно динамически рассчитать его, вы сможете сделать это на основе этой договоренности.

источник

2013-04-01 14:50:36 metadept

, если вы избавитесь от всего содержимого в контейнере , нижний колонтитул все еще остается ниже нижней части экрана. – user1060187

@ user1060187 Это только потому, что я положил 'min-height' в элемент' container'. Если вы хотите, чтобы он уменьшался до 0 высоты, просто удалите 'min-height: 300px;' и он должен работать правильно. – metadept

Нижний колонтитул тогда появлялся бы сразу после navbar, не так ли? – user1060187

Нижний колонтитул под фиксированными divs

ответ

Смежные вопросы