Контекст верхнего и нижнего колонтитула

Я пытаюсь получить липкий нижний колонтитул внизу страницы с твердым заголовком в верхней части страницы. Но у меня есть некоторые трудности с телом и классом 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% .. Спасибо заранее за Помогите!

источник

2013-03-17 Peleus

Вы можете попробовать это:

<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/

источник

2013-03-17 15:16:38 freshbm

Благодаря кучу! Теперь я получил работу, благодаря которой мне пришлось изменить только ширину 1000px (за исключением html и заголовка) и добавить left: 0 и right: 0, чтобы div снова оставался в центре страницы ! Часть HTML работает так: – Peleus

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

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

источник

2013-03-17 16:09:36

Я сделал яваскрипта функцию решить эту проблему

<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

источник

2013-04-12 17:25:40

Контекст верхнего и нижнего колонтитула

ответ

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