css - 没有脚本标记的div不能很好地显示

我想在用户禁用JavaScript时显示noscript警告，就像StackOverflow一样。

我用这个html：

<noscript>
  <div id="noscript-warning">
    Este sitio funciona mejor con JavaScript habilitado. Descubrí
    <a href="">cómo habilitarlo.</a>
  </div>
</noscript>

和这个CSS：

#noscript-warning
{
    font-family: Arial,Helvetica,sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    text-align: center;
    font-weight: bold;
    font-size: 12pt;
    color: white;
    background-color: #AE0000;
    padding: 10px 0;
    display: block;
}

#noscript-warning a
{
    color: #FFFFC6;
}

#container
{
    width: 98%;
    margin: auto;
    padding: auto;
    background-color: #fff;
    color: black;
    border-style: solid;
    border-color: #3E4F4F;
    border-width: 1px 2px 2px 1px;
    line-height: 130%;
}

其中#container是模板的主要内容元素。

当noscript标记可见时，它会出现在某些内容的前面。我不希望那样，该内容应显示在警告下方。

我怎样才能做到这一点？

最佳答案

如果您想要位置行为：固定并且需要从顶部向下推初始内容，则可以在noscript区域中包含第二个div。赋予此div可见性：隐藏，并且其高度等于位置为固定的div的高度。

关于css - 没有脚本标记的div不能很好地显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/702154/