Css重新调整固定横幅

所以很快的问题，我一直没能找到正确的措辞，也许在谷歌，但我试图使一个fixed横幅将调整页面的大小。我发现使用百分比宽度至少适用于大容器，但是我的主容器中的横幅容器不会重新调整为足够大（横幅比主容器延长）。Css重新调整固定横幅

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>

唯一的更高水平的CSS是CSS的背景颜色.body标签。我为此使用了MeteorJS。干杯

来源

2015-01-08 Adam Wechter

这里有一个小提琴：http://jsfiddle.net/c4e0syq5/。调整大小时，.contMain横幅似乎会变得越来越窄。你能描述一下你观察到的具体情况，以及它与你期望的有什么不同？ – Wesley

当然。对不起，所以问题是，除非我将.contMain定义为静态px计数，否则当.contMain-banner将width设置为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重新调整固定横幅

回答

相关问题