Div не реагирует [фундамент]

Question

Я разработал макет в PS, используя сетку из 12 столбцов, и хочу, чтобы он работал в Wordpress. Я использую тему Reverie для начала, которая является основной темой, которая работает на Foundation.

Я получил свой заголовок, как он должен, но содержание ниже его не будет подстраиваться под размер экрана. Ill пост код у меня ниже:

page.php:

<?php get_header(); ?> 
<div class="container"> 
<!-- Row for main content area --> 
    <div class="large-12 medium-12 small-12 columns" id="content" role="main">  
     <div id="top-content" class="large-12 medium-12 small-12"> 
     </div> <!-- end top-content"> 

     <footer> 
      <center><p class="copy">&copy; <?php echo date('Y'); ?> Roelof Plas. Ontwerp door <a href="http://roelofplas.nl" rel="nofollow" title=""><span class="roelof">roelofplas.nl.</span></a> Alle rechten voorbehouden.</p></center> 

     </footer> 
    </div> 
</div> 
<?php get_footer(); ?> 

style.css:

#top-content { 
    width: 1140px; 
    height: 530px; 
    background-color: #63bcb8; 
    z-index: 1000; 
    top: -48px; 
    position: absolute; 
} 

Что это должно выглядеть (только turquase DIV):

Я не могу опубликовать изображения еще (нужно еще 2 представителя) click this.

Живая версия: click me

Пожалуйста, скажите мне, что я делаю неправильно. Я прочитал тонну уроков о Фонде и сетках и т. Д., Но я не могу понять это правильно.

Если вам нужна дополнительная информация от меня или чего-либо еще, скажите, пожалуйста.

С уважением,

Roelof Plas

РЕШЕНИЕ ПО Joel, благодаря спариванию! Не могу ответить, но я буду, когда смогу! : D

Answer 1

Удалить "ширина: 1140px;" из вашего # класса верхнего содержания, .columns и .large-12, .medium-12 и т. д. из фонда позаботятся об оперативности.

Причина, по которой ваш нижний колонтитул не отображается, в два раза: один, вы должны заменить положение: абсолютное на # верхнем содержании с #position: relative. Использование позиции: абсолютный принимает DIV из потока DOM и заставляет ваш нижний колонтитул скрывать «позади».

У вас также есть незакрытый комментарий:

конца верхний контент "> должен быть конец топа-контента ->

С теми изменениями футера затем должен правильно отображаться и главный бирюзовый DIV будет отзывчивый

Answer 2

> You haven't used "columns" class on this. 
> You don't required any kind of width when you applying "-12" in every class. 
> And if you still willing to provide height on this **ID** "#top-content". then use media query to give width on every other size. 

<div id="top-content" class="large-12 medium-12 small-12">