css 重新缩放固定横幅

Css Rescaling Fixed Banner

本文关键字：缩放 新缩放 css      更新时间：2023-09-26

这么快的问题，我可能无法在谷歌中找到正确的措辞，但我正在尝试制作一个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为此。干杯

试试这个 - 代码笔在这里

.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>
相关文章：