Css Rescaling Fixed Banner

Так быстро, я не смог найти правильную формулировку, возможно, в google, но я пытаюсь сделать баннер fixed масштабироваться при изменении размера страницы. Я обнаружил, что использование процентной ширины работает, по крайней мере, для большого контейнера, однако мой баннер-баннер в основном контейнере не будет достаточно быстро масштабироваться (баннер расширяется дольше, чем основной контейнер).Css Rescaling Fixed Banner

CSS:

.contMain { 
     width:80%; 
     position: top 
     padding-top: 0; 
     border-top: 0; 
     margin: 0 auto; 
     background-color: #F1EDCC; 
    } 
.contMain-banner { 
     position:fixed; 
     width: inherit; 
     background: #87AADF; 
}

HTML:

<div class="contMain"> 
    <div class="contMain-banner"> 
     <h1 class="contMain-title">Some Title</h1> 
      {{> MeteorTemplate}} 
    </div> 
</div>

устанавливаемый сотовый только более высокого уровня является .body тегом в CSS для фонового цвета. Я использую MeteorJS для этого. Приветствия

источник

2015-01-08 Adam Wechter

Вот скрипку: http://jsfiddle.net/c4e0syq5/. По мере изменения размера, .contMain-баннер становится все шире и уже. Не могли бы вы описать, что конкретно вы наблюдаете и как это отличается от того, что вы ожидаете? – Wesley

Конечно. Извините, поэтому проблема заключается в том, что если я не определяю .contMain как счетчик статических пикселей, когда .contMain-banner устанавливает ширину как width: inherit; он чуть длиннее основного контейнера. Кроме того, если я попытаюсь сделать 100%, он убежит от экрана вправо, а левая сторона - точно –

. Я полагаю, что моя текущая цель - выровнять баннер именно с основным контейнером без необходимости статически определять размер основного контейнер –

Попробуйте это - codepen here

CSS

body { 
height:100%; 
width:100%; 
} 
.contMain { 
    height:150px; 
    width:80%; 
    padding:0; 
    margin: 0 auto; 
    background-color: #333333; 
} 
.contMain-banner { 
    position:fixed; 
    width: inherit; 
    height:auto; 
    background: #d7d7d7; 
} 
span { 
color:#fff; 
position:absolute; 
top:125px; 
}

HTML

<body> 
<div class="contMain"> 
    <div class="contMain-banner"> 
     <h1 class="contMain-title">Main Content Banner</h1> 
     {{> MeteorTemplate}} 
    </div> 
    <span>This is the main container</span> 
</div> 
</body>

источник

2015-01-08 18:20:03

Css Rescaling Fixed Banner

ответ

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