Почему ширина нижнего колонтитула 100%?

Я ожидаю, что мой нижний колонтитул займет все горизонтальное пространство в нижней части страницы, width 100% BUt по какой-либо причине сосредоточен на странице и, похоже, имеет характеристики моей обертки. Вот изображение (сайт пока не живет, так что я не могу дать ссылку)Почему ширина нижнего колонтитула 100%?

enter image description here

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

JSfiddle http://jsfiddle.net/aHpua/4/

HTML

<div class="content"> 
      <article class="content-info">Content 
      </article> 
      <aside class="sidebar"> 
       <h4>MORE INFORMATION</h4> 
       <ul> 
        <li> 
         <a href="#">Item1</a> 
        </li> 

        <li> 
         <a href="#">Item2</a> 
        </li> 
       </ul> 
      </aside> 
    </div><!-- END.content-wrapper --> 
    <div class="contact-us"> 
     <h2> 
      Have any questions for us? 
      <a href="#">CONTACT US</a> 
     </h2> 
    </div><!-- END.contact-us --> 
<div class="footer-container"> 
     <div class="wrapper"> 
      <footer class="footer"> 
       <ul> 
        <li>Tel:<span> 0000</span></li> 
        <li>Fax:<span> 0000</span></li> 
        <li>Email: <a href="mailto:[email protected]">bla</a></li> 
        <li><h1>Company Name</h1></li> 
       </ul> 
      </footer> 
     </div> 
     <!-- END.footer-wrapper --> 
     <div class="copyright"> 
      <div class="wrapper"> 
       &copy; Copyright 2013. 
      </div><!-- END.copyright-wrapper --> 
     </div> 
    </div><!-- END.footer-container -->  
     <?php wp_footer(); ?> 
     <!-- Google Analytics --> 
    </body> 
</html>

CSS

/* ========================================================================== 
    =content 
    ========================================================================== */ 

.content { 
    background-color: #fff; 
    border: 1px solid #e1e1e1; 
    padding: 30px 65px 30px 65px; 
    z-index: 999; 
    overflow: hidden; 
    box-shadow: 0 -1px 0 #ffffff inset, 
       0 -2px 0 #ebebeb inset, 
       0 -3px 0 #ffffff inset, 
       0 -4px 0 #efefef inset; 
} 

.contact-us { 
    background-color: #f9faf6; 
    padding: 30px 65px 30px 65px; 
    border-left: 1px solid #e1e1e1; 
    border-right: 1px solid #e1e1e1; 
    border-bottom: 1px solid #e1e1e1; 
    box-shadow: 0 4px 5px -5px #d3d3d3 inset; 
    clear: both; 
} 

.content-info { 
    float: left; 
    width: 590px; 
    background: red; 
    line-height: 25px; 
} 

.sidebar { 
    float: right; 
    width: 220px; 
    line-height: 25px; 
} 

/* ========================================================================== 
    =footer 
    ========================================================================== */ 


.footer-container { 
    background-color: #2a2a2b; 
    background-image: url(img/header_bg.png); 
    overflow: hidden; 
    margin-top: 25px; 
    width: 100%; 
} 

.footer { 
    border-top: 5px solid #00b2e5; 
    overflow: hidden; 
} 

.copyright { 
    background-color: #242424; 
    color: #6b6b6b; 
    width: 100%; 
} 

.copyright .wrapper { 
    padding: 7px 65px 7px 65px; 
    width: 850px; 
}

источник

2013-02-20 Ilja

Можете ли вы сделать скрипку? – dezman

Дай мне вторую. – Ilja

Я не могу воспроизвести проблему с кодом, который вы опубликовали. Почему бы вам хотя бы не попытаться сузить его. Для отладки этой проблемы нам не нужны такие вещи, как «box-shadow» или «У вас есть какие-либо вопросы для нас?». Это то, что называется «отладка», что упрощает вашу проблему, пока вы не сможете определить причину. –

.wrapper { 
width: 980px; 
margin: 0 auto; 
}

Объекта находится внутри .wrapper

источник

2013-02-20 15:37:57

Оказывается, что .content, .footer-контейнер и т.д., должны иметь общий родительский где-то есть фиксированная ширина. width: 100% сделает только нижний колонтитул столь же широким, как и этот родитель, а не шире, поэтому вам придется перемещать его снаружи.

источник

2013-02-20 15:27:05

Из того, что я вижу, это тема Wordpress. Убедитесь, что ваш нижний колонтитул не находится внутри # страницы, который имеет фиксированную ширину и поле 0 авто.

, что div начинается в header.php и заканчивается footer.php.

убедитесь, что ваш код проверен и у вас нет закрытых div. если у вас есть #page в заголовке, закройте его перед сноской

источник

2013-02-20 15:30:42

Почему ширина нижнего колонтитула 100%?

ответ

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