Нижний колонтитул для размещения в нижней части HTML-раздела

Question

Я пытаюсь создать сайт с одной страницей. Я создал 3 раздела HTML, и в разделах у меня есть divs, содержащие все содержимое. Каждый раздел изменяет размер экрана, и я использовал JQuery для этого. Внутри разделов я хотел бы иметь нижний колонтитул в самом конце раздела, но это сложно. Я попытался положить контейнеры внутри каждого раздела и установить минимальную высоту 100%, а затем поместить нижний колонтитул внутрь, но это не сработает. Я предоставил некоторые ссылки. Я бы очень признателен за помощь.

Веб-сайт находится на www.test.tagwebsites.com.au.
Javascript

<script> 
function newsize() { 
var wide = $(window).width(); 
var high = $(window).height(); 
$("section").width(wide).height(high); 
} 

</script> 

HTML

<section> 
<div id="portfolio"> 
<span id="holder"></span> 

     <table border="0" id="gallery"> 
     <tr> 
     <td><a href="http://www.raydz.com.au" target="new"><img src="images/raydz.png" alt="raydz website" /></a></td> 
     <td><img src="images/gozzy.png" alt="gozzy website" title="Under construction"/></td> 
     <td><a href="http://www.thevanfromhoian.com.au" target="new"><img src="images/hoian.png" alt="hoian website" title="The van from Hoi An" /></a></td> 
     </tr> 
     <tr> 
     <td><a href="http://www.buxtongeneralstore.com.au" target="new"><img src="images/buxton.png" alt="buxton website" /></a></td> 
     <td><a href="http://invest.edwardhinds.com.au" target="new"><img src="images/invest.png" alt="invest website" /></a></td> 
     <td><img src="images/edward.png" alt="edward website" /></td> 
     </tr> 
     <tr> 
     <td><img src="images/hanson.png" alt="hanson website" /></td> 
     <td><img src="images/upskilled.png" alt="upskilled website" /></td> 
     <td><img src="images/edwards.png" alt="edward hinds website" /></td> 
     </tr> 
     </table> 
      <div id="foliofooter" class="foot"> 
      <p>These are just some of the pages we have developed</p> 
      </div> 

CSS

.foot{display:block; 
width:100%; 
height:60px; 
background-color:#F33; 
position:relative; 
bottom:0px; 
clear:both; 
} 

#gallery{display:block; 
clear:both; 
width:90%; 
margin-left:auto; 
margin-right:auto; 
min-height:100%; 
} 

#portfolio{display:block; 
clear:both; 
width:100%; 
height:100%; 
position:relative; 
top:0px; 
bottom:0px; 
} 

Answer 1

Похоже, что происходит, является то, что ваш .foot класс с bottom: 0px Ро разделяя нижний колонтитул в нижней части секции. Но тогда браузер попадает на ваш javascipt, и если высота окна больше высоты раздела, он меняет высоту раздела, но он оставляет нижний колонтитул (т. Е. Где именно css сначала разместил его).

Вам нужно что-то в JQuery, как это:

function newsize() { 
    var wide = $(window).width(); 
    var high = $(window).height(); 
    $("section").width(wide).height(high); 
    $('.foot').css("bottom", "0px"); 
} 

Кроме того, вызвать эту функцию, как только страница загружается, если вы еще не.

bottom: 0px Удалить из CSS для .foot

Теперь вы установили нижнее свойство после того, как была указана высота секции.

Answer 2

Я решил создать шаблон снова с нуля. На этот раз я начал с разделов, добавил контейнеры div той же ширины и высоты, что и разделы, используя абсолютное позиционирование с вершиной 0 и нижней частью 0, а затем добавил нижние колонтитулы, используя относительное позиционирование. Затем я добавил остальную часть контента. Это решило все мои проблемы. Я должен был сделать небольшую ошибку во время первоначальной сборки.