Проблема с компоновкой css - полные секции ширины с автоматической высотой?

Question

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

Это моя структура страницы.

<div id="#page-wrap"> 
<header> 
    <div class="inner"> 
     #navigation 
     #logo floated right 
    </div> 
</header> 
<section id="services"> 
    <div class="inner"> 
     #some floated boxes 
    </div> 
</section> 
<section id="main"> 
    <div class="inner"> 
     #secteion content 
     #aside sidebar 
    </div> 
</section> 
<footer> 
    <div class="inner"> 
     #footer stuff 
    </div> 
</footer> 
</div> 

заголовок, разделы и нижние колонтитулы всегда на 100%. Каждый раздел имеет .inner div, который центрирован с полем: 0 авто.

.inner { 
    margin: 0 auto; 
    padding: 96px 72px 0; 
    width: 1068px; 
    color: #3C3C3C; 
} 

и в качестве примера это мой заголовок:

header .inner { 
    background: #fff url('images/years.png') no-repeat top right; 
    position:relative; 
    /*height:100px;*/ 
} 

#logo { 
    position:absolute; 
    right:70px; 
    top:15px; 
    float:right; 
} 

ПРОБЛЕМЫ: если я не установить заголовок на определенную высоту фонового изображения получить срез. Если я проверю заголовок с помощью инструмента разработки, такого как firebug, навигация внутри него выглядит вне поля заголовка. Поэтому, если я не устанавливаю высоту 100 пикселей, горизонтальная навигация отключает фоновое изображение, даже если оно находится в том же заголовке.

любая идея, что я должен рассмотреть здесь.

Answer 1

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

edit // у вас также есть заявил, что логотип плавает, но затем показывает, что он позиционируется абсолютно - что это? и как навигация позиционируется? необходима дополнительная информация

Answer 2

header, section и footer элементы не являются контейнерными элементами - если вы хотите, чтобы вести себя так, как будто они были вы должны установить их display: block - это заставит их вести себя как нормальный div бы

Answer 3

Я думаю, что это может быть clearfix issue-- вы можете попробовать добавить <div style="clear: both;"></div>, прежде чем закрыть свой заголовок, или добавьте следующие свойства к вашему заголовку

.header { 
    overflow: hidden; 
    display: inline-block; /* Necessary to trigger "hasLayout" in IE */ 
    display: block; /* Sets element back to block */ 
} 

однако, если ваша навигация будет иметь вещи, которые вывешивают его контейнера иногда (например, выпадающего списка), лучше использовать что-то вроде метода в http://www.positioniseverything.net/easyclearing.html.

Наконец, вы также можете попробовать обернуть все это (заголовок и содержимое) в другом div, который будет иметь только свойство фона. таким образом, изображение bg не будет отключено.