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重新調整固定橫幅

回答

相關問題