Блог

Главная - Вопросы по программированию - Нижний колонтитул не реагирует

Нижний колонтитул не реагирует

#css #html #responsive-design

#css #HTML #адаптивный дизайн

Вопрос:

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

 <body>
    <div id="wrap">
        <div id="top">
            @include('includes.top')
        </div>
        <div id="left">
            @include('includes.left')
        </div>
        <div id="content">
            @yield('content')
        </div>
        <div id="right">

        </div>
        <div id="footer">
            @include('includes.footer')
        </div>
    </div>
</body>

styles.css

 html,
body { height: 100%; }
body {
  display: table;
  width: 100%;
}
#footer {
  display: table-row;
  height: 1px;
}
#content { height: 100%; }

Комментарии:

1. Можете ли вы определить «отзывчивый»? Что вы хотите, чтобы он делал? Что он на самом деле делает?

2. jsfiddle или этого не произошло 🙂

3. Плюс к вопросу @FDL, ваш раздел содержимого занимает 100% высоты, будьте осторожны 😉

4. galengidman.com/2014/03/25 /… как будто он объясняет проблему. Я хочу переместить нижний колонтитул в нижнюю часть страницы

5. сделайте обертку вашей «таблицы» высотой 100%, а затем всех прямых дочерних элементов внутри display: table-row; — jsfiddle.net/M9wDv/1

Ответ №1:

Код в ссылке, которую вы опубликовали (в комментариях), реализует его не так, как вы..

Ваш html должен быть (согласно этой статье)

 <body>
    <div id="wrap">
        <div id="top">
            @include('includes.top')
        </div>
        <div id="left">
            @include('includes.left')
        </div>
        <div id="content">
            @yield('content')
        </div>
        <div id="right">

        </div>
    </div>
    <div id="footer">
        @include('includes.footer')
    </div>
</body>

и ваш css

 html,
body { height: 100%; }
body {
  display: table;
  width: 100%;
}
#footer {
  display: table-row;
  height: 1px;
}
#wrap{ display: table-row; height: 100%; }

И демонстрация этого кода на http://jsfiddle.net/LFeYA /