2015-02-13 2 views
0

У меня есть следующий код, но по какой-то причине не работает.фиксированная ширина заголовка 100%

<body> 
    <div class="body_wrapper"> 
     <header></header> 
    </div>  
</body> 

я хотел body_wrapper иметь маржу: 20px, но если положить позиция: фиксированная в заголовок игнорирует его с правой стороны.

http://jsfiddle.net/vfe1bz65/

я хочу взять заголовок ширина 100% body_wrapper. я попытался положить право: 20px, справа: 20px, но ничего

это возможно без сдачи, например ширина: 98%?

ответ

2

удалить width и установить обе left и right свойства
например, http://jsfiddle.net/rbk7jv8b/

header { 
    min-height:160px; 
    background:red; 
    position:fixed; 
    left: 20px; 
    right: 20px; 
    z-index:100; 
} 

Другой подход использует calc() для свойства width (100% минус 40px маржи) например, http://jsfiddle.net/f1ay8zkr/

header { 
    min-height:160px; 
    background:red; 
    position:fixed; 
    width: -webkit-calc(100% - 40px); 
    width: -moz-calc(100% - 40px); 
    width: calc(100% - 40px); 
    z-index:100; 
} 
+0

Поскольку это решает проблему, вы не предложили никаких объяснений, как работают элементы «fixed». Кроме того, я считаю, что вы можете [отбросить префиксы для calc()] (http://caniuse.com/#feat=calc). – Vucko

0

Ваш div не близко.

<body> 
    <div class="body_wrapper"> 
     <header></header> 
    </div>  
</body> 

Затем используйте левый и правый свойства:

header { 
    min-height:160px; 
    background:red; 
    position:fixed; 
    left: 20px; 
    right: 20px; 
} 
+0

типографская ошибка извините. посмотрите jsfiddle правильно – DMande

+0

Ошибка в jsfiddle тоже, но это не проблема. Используйте левое и правое свойства для замены margin/padding :) –

0

добавить right:20px; и left:20px; УДАЛИТЬ width:100%

header { 
    min-height: 160px; 
    background: red; 
    position: fixed; 
    z-index: 100; 
    right: 20px; 
    left: 20px; 
} 
Смежные вопросы