CSS

Question

我试图在索引页面上有一个滚动横幅，它有多个子属性但主要属性为：

height: 75vh;

在接下来的所有页面中，我希望相同的横幅包含适用于它的所有其他规则，但只有不同的高度：

height: 30vh;

这将允许两个横幅遵循所有相同的规则以保持移动响应 - 即它们仍然属于id =＆＃34; banner＆＃34;。

一个简单的解决方法是标记一个id =＆＃34; bannerX＆＃34;和一个id =＆＃34; bannerY＆＃34;然后只需在相应的X或Y下复制所有后续CSS。例如：

#bannerX {
    background-color: #444;
    color: #fff;
    min-height: 40em;
    height: 75vh;
    position: relative;
}

    #bannerX input, #banner select, #banner textarea {
        color: #fff;
    }

    #bannerX a {
        color: #fff;
    }

    #bannerX strong, #banner b {
        color: #fff;
    }

   and so on...

与

#bannerY {
    background-color: #444;
    color: #fff;
    min-height: 40em;
    height: 30vh;
    position: relative;
}

    #bannerY input, #banner select, #banner textarea {
        color: #fff;
    }

    #bannerY a {
        color: #fff;
    }

    #bannerY strong, #banner b {
        color: #fff;
    }

   and so forth...

但这只会导致大量CSS的重复完全相同，只是原始ID正在改变其中的一条规则。这可行，但似乎是一个非常混乱的方式。我确信必须有更好的工作方式，但我似乎无法使其发挥作用。我试过加入一个类=＆＃34; banner-thick＆＃34;或者类=＆＃34; banner-thin＆＃34;在他们自己的部分中的每一个，但似乎没有工作，因为那么两个横幅都不遵循原来的id =＆＃34; banner＆＃34;规则，因为他们现在id =＆＃34; bannerX＆＃34;或id =＆＃34; bannerY＆＃34;！我似乎无法让它发挥作用！有谁知道如何解决这个问题？

我怀疑这是一个简单的修复，我只能看不到树上的木头！

谢谢大家。

Answer 1

使用多个这样的类 - class="bannerX height1"作为第一个。对于第二个使用class="bannerX height2"。高度只保持高度值。无需在bannerX中使用高度。

CSS

.bannerX {
    background-color: #444;
    color: #fff;
    min-height: 40em;
    /*height: 75vh;*/ as we define different heights in height1 & height1 class
    position: relative;
}

.height1 {
    height: 75vh;
}

.height2 {
    height: 75vh;
}

HTML

<div class="bannerX height1">
</div>


<div class="bannerX height2">
</div>

遵循CSS

1 个答案:

CSS

HTML