CSS重新缩放固定横幅

Question

这么快的问题，我可能无法在Google中找到正确的措词，但是我试图使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 在这里

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 个解决方案

解决方案1
0 2015-01-08 18:20:03

CSS重新缩放固定横幅

问题描述

1 个解决方案

解决方案1 0 2015-01-08 18:20:03

解决方案1
0 2015-01-08 18:20:03