Конфликт на горен и долен колонтитул

Опитвам се да получа лепкав долен колонтитул в долната част на страницата с плътен колонтитул в горната част на страницата. Но имам някои затруднения с тялото и html класа. Моят колонтитул е 100px на височина от горната част на страницата, моите html и body класове са 100% на височина, а долният ми колонтитул е 150px. Написах правилно долния колонтитул на моята страница, така че той се придържа към дъното, но 100% височината на html или тялото го поставя още по-надолу на страницата ми, така че ще трябва да превъртите, за да видите долния колонтитул, въпреки че няма текст, който го натиска толкова надолу! Ето моят CSS код:

html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}

body {
height:100%;
margin:0;
padding:0;
}

.wrapper {
min-height:100%;
}

.header {
position:fixed;
background:#FFF url(pics/header.png) no-repeat top center fixed;
top:0;
height:100px;
width:1920px;
z-index:1000;
}

.main {
position:absolute;
top:100px;
width:990px;
left:0;
right:0;
overflow:auto;
margin:0 auto;
padding-bottom:150px; /* must be same height as the footer */
padding-top:10px;
padding-left:5px;
padding-right:5px;
}

.footer {
position:relative;
background-image:url(pics/bg_footer.png);
margin-top:-150px; /* negative value of footer height */
height:150px;
width:990px;
margin:0 auto;
clear:both;
}

И ето моят HTML код:

<body>
<div class="wrapper">
    <div class="header">
</div>
<div class="main">
    <p>I can write here</p>
</div>
</div>
<div class="footer">
    <p class="alignleft">© Tim</p>
    <p class="alignright">17 maart 2013</p>
</div>
</body>

Почти съм сигурен, че има нещо общо с височината на html от 100%.. Благодаря предварително за помощта!


html css header footer height
person Peleus    schedule 17.03.2013    source източник

Отговори (3)


arrow_upward
1
arrow_downward

Можете ли да опитате това:

<body>

    <div class="header"></div>
    <div class="main">
      <p>I can write here</p>
    </div>

    <div class="footer">
      <p class="alignleft">© Tim</p>
      <p class="alignright">17 maart 2013</p>
    </div>

</body>

Това отговаря ли на вашите нужди?

CSS

html {
  height:100%;
  background: url(pics/bg.png) no-repeat top center fixed;
  margin:0;
  padding:0;
}

body {
  padding:0;
  margin:0;
}

.header {
  background:#FFF url(pics/header.png) no-repeat top center fixed;
  height:100px;
  width:100%;
}

.main {
  position:absolute;
  top:100px;
  bottom:150px;
  overflow:auto;
  margin:0 auto;
  width:100%;
  padding-bottom:10px;
  padding-top:10px;
  padding-left:5px;
  padding-right:5px;
}

.footer {
    position: absolute;
    width: 100%;
    bottom:0;
    background-image:url(pics/bg_footer.png);
    height:150px;
    width:100%;
    margin:0 auto;
    clear:both;
}

Вижте пример за JSFiddle:

http://jsfiddle.net/2SL7c/

person freshbm    schedule 17.03.2013
comment
Благодаря много! Направих го да работи сега благодарение на вас, единственото нещо, което трябваше да променя, беше ширината на 1000px (с изключение на html и заглавката) отново и да добавя left:0 и right:0, така че div да остане отново в центъра на страницата ! HTML частта работи по този начин :) - person Peleus; 17.03.2013

arrow_upward
0
arrow_downward

Какво ще кажете да оставите и долния колонтитул да бъде коригиран? Направих този jsFiddle, погледнете. Промених вашите divs на ID вместо класове (тъй като те са уникални и трябва да се появяват само веднъж).

#footer {
position:fixed;
bottom: 0;
background-image:url(pics/bg_footer.png);
background-color:#FF0;
height:150px;
width: 100%;
}
person Christoffer Helgelin Hald    schedule 17.03.2013

arrow_upward
0
arrow_downward

Направих javascript функция за разрешаване на това

<script type="text/javascript">
        $(window).bind("load", function () {
            var distance = 20;
            var header = $("#header");
            var posContent = header.position().top;
            posContent = posContent + header.height() + distance;

            var content = $("#content");
            content.css({ 'top': posContent + 'px' });
            var posFooter = content.position().top;
            posFooter = posFooter + content.height() + 200;

            var footer = $("#footer");
            footer.css({ 'top': posFooter + 'px' });
        })
    </script>

моят CSS изглежда точно така

#footer{
            background-color: #E6E6E6;
            background-repeat: repeat;
            bottom: 0;
            height: 100%;
            pointer-events: none;
            position: absolute;
            width: 100%;
            height:50px;
            z-index: -1;
        }

        #header{
            background-color: #E6E6E6;
            background-repeat: repeat;
            height: 100%;
            pointer-events: none;
            position: absolute;
            top: 5px;
            width: 100%;
            height:50px;
            z-index: -1; 
        }

        #content{
            pointer-events: none;
            position: absolute;
            width: 100%;
            z-index: -1; 

        }

Накрая

html кода

<div id="header">your content</div>
<div id="content">your content</div>
<div id="footer">your content</div>

работи перфектно, без значение колко страхотно е съдържанието

;D

person William Ballesteros    schedule 12.04.2013