Конфликт шапки и футера

Я пытаюсь получить липкий нижний колонтитул внизу страницы со сплошным заголовком вверху страницы. Но у меня возникли некоторые трудности с классом body и html. Мой заголовок имеет высоту 100 пикселей от верхней части страницы, мои классы html и body имеют высоту 100%, а нижний колонтитул - 150 пикселей. Я правильно написал нижний колонтитул на своей странице, поэтому он прилипает к нижней части, но 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
Огромное спасибо! Благодаря вам у меня все заработало, единственное, что мне пришлось изменить, это снова изменить ширину на 1000 пикселей (кроме html и заголовка) и добавить слева: 0 и справа: 0, чтобы div снова оставался в центре страницы. ! Часть HTML работает так :) - person Peleus; 17.03.2013

arrow_upward
0
arrow_downward

Как насчет того, чтобы нижний колонтитул тоже был исправлен? Я сделал этот jsFiddle, посмотрите. Я изменил ваши div на идентификаторы вместо классов (поскольку они уникальны и должны появляться только один раз).

#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