Question

如此快速的问题，我可能无法在谷歌中找到正确的措词，但我试图制作fixed横幅会在页面调整大小时缩放。我发现使用百分比宽度至少适用于大容器，但主容器中的横幅容器不会重新缩放到该容器中（横幅延伸的时间比主容器长）。

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 。干杯

Answer 1

试试这个 - 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>

Css重新缩放固定横幅

1 个答案: