Question

我是CSS的新手，我正在努力实现整页宽度栏。因此，我创建了一个类来处理整页宽度，并希望为不同颜色的条创建单独的类。但是，浏览器不会渲染栏。我已尝试将postion:relative应用于主要的全角div，将position:absolute应用于条形div以使其无效。我该如何解决这个问题？我观察到我可以将CSS线条打到一个div中以给我想要的效果。但是，我想将这两个功能划分为两个不同的类，只是为了尝试编写干净的代码。

.fullwidth{
        position: absolute;
        width: 100%;
        height: 80px;
        left: 0;
        right: 0;
    }

.bar-1{
        background-color: lightblue;
}

<div class = "fullwidth">
    <div class = "bar-1"></div>
</div>

Answer 1

您的.bar-1似乎没有宽度或高度

.bar-1{
    background:lightblue;
    overflow:hidden;
    height:100%;
    width:100%;
}

小提琴：http://jsfiddle.net/1ccp3qpb/

Answer 2

你可以通过向你的栏添加一些高度来获得该栏...否则它将为0像素然后你将无法看到它。

.bar-1
{
    background-color: lightblue;
    height:20px;
}

Answer 3

您可以使用min-height：

.fullwidth{
        position: absolute;
        width: 100%;
        height: 80px;
        left: 0;
        right: 0;
    }

.bar-1{
        background-color: lightblue;
        min-height: 16px;
}

<div class = "fullwidth">
    <div class = "bar-1"></div>
</div>

请注意min-height和font-size属性是兼容的。

如何在没有文本内容的情况下显示div？

3 个答案: