2016-01-30 3 views
2

У меня проблема, когда я просто не могу получить свой нижний колонтитул, чтобы выровняться до приличного выравнивания по центру текста и выровненного по центру содержимого по отношению к ширине боковой панели.Нижний колонтитул нижнего колонтитула в блоке/встроенном блоке

Изображения моего вопроса здесь (не выровнен):

боковая панель Полная ширина: enter image description here

врезке сужаются: enter image description here

Мой текущий код выглядит следующим образом:

CSS

#cl-wrapper .cl-footer { 
    border-top: 1px solid #131519; 
    box-shadow: 0 1px 0 #2A2C31 inset; 
    height: 50px; 
    display: block; 
    width: 100%; 
    background-color: #1F2126; 
    color: #777; 
    position: fixed; 
    bottom: 0; 
    text-align: center; 
} 

#cl-wrapper .cl-footer > .row { 
    clear: both; 
    display: inline-block; 
    line-height: 19px; 
    margin: auto; 
    overflow: hidden; 
} 

HTML

<div class="container-fluid"> 
<footer class="cl-footer"> 
<div class="row"> 
    <?php echo (ENVIRONMENT === 'development') ? 'Page rendered in <strong>{elapsed_time}</strong> seconds. Using <strong>{memory_usage}</strong> of memory | ' . 'CodeIgniter Version <strong>' . CI_VERSION . '</strong><br />' : '' ?>Copyright &copy; <?=date('Y')?> | Eridian Pty Ltd | All Rights Reserved 
</div> 
</footer> 
</div> 

Любая помощь будет принята с благодарностью.

+0

Вы можете разместить обработанную HTML (с выходом после PHP работает, вместо сценария PHP) и включают в себя боковую панель HTML/CSS, а? (ваш CSS включает в себя '# cl-wrapper', и ваш HTML не показывает этого, поэтому ясно, что происходит больше, что имеет отношение к проблеме :-) В идеале было бы здорово, если бы вы могли воспроизвести как фрагмент или код (http://codepen.io) – ryantdecker

+0

там нет никакой разницы, но его здесь ниже: <колонтитула класса = «сл-колонтитул»>

Page rendered in 0.0652 seconds. Using 1.64MB of memory | CodeIgniter Version 3.0.3
Copyright © 2016 | Eridian Pty Ltd | All Rights Reserved
Я не могу повторить на сайте, как, к сожалению, как есть много кода делает все это. элементы управления выше. –

+0

похоже, что весь нижний колонтитул сдвинут вправо (так что он простирается от экрана), поэтому текст на самом деле по-прежнему сосредоточен, вы просто не видите весь контейнер. Если вы можете опубликовать свой полный html, CSS и любой JS, который вы используете для сокращения/расширения боковой панели, я с удовольствием предлагаю исправление, но пока вы не указали достаточно информации. – ryantdecker

ответ

1
display: table; 
margin: 0 auto; 

Эй. Возможно, это сработает. Вот как выглядит on my page.

+1

Это работало вместе с другим исправлением и id (со специфическим стилем JS), которое я пропустил из исходного кода выше, спасибо! –

1

Используйте этот код и прикрепите его к классу соответствующего раздела, независимо от того, что они могут быть вызваны. Номер ширины и номер поля для содержимого и нижнего колонтитула, скорее всего, прикреплены к javascript, который обрабатывает переключатель закрытия боковой панели. Убедитесь, что они одинаковые.

#wrapper { 
    height: auto; 
    min-height: 100%; 
    position: relative; 
} 

.page-sidebar { 
    position: fixed; 
    width: 210px; /* This number */ 
    position: absolute; 
    height: 100%; 
    left: 0; 
    bottom: 0; 
    top: 0; 
    padding-top: 50px; 
    z-index: 2; 
    background:#333; 
} 


.page-content { 
    margin-left: 210px; /* This number */ 
    min-height: 100%; 
    padding-top: 50px; 
    background:#999; 
} 

footer { 
    background:#eee; 
    margin-left: 210px; /* This number */ 
    padding: 15px 20px; 
    border-top: 1px solid #e3e3e3; 
    height: 51px; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    text-align:center; 
} 

Смотрите рабочий CODEPEN

+1

Это было связано с переключением JS (id, который я пропустил из вышеупомянутого вопроса), большое спасибо –

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