Div внутри тега no-script плохо отображается

Question

Я хочу отображать предупреждение noscript, когда у пользователей отключен JavaScript, точно так же, как это делает 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 виден, он появляется перед некоторым содержимым. Я не хочу этого, содержание должно отображаться под предупреждением.

Как я могу это сделать?

Answer 1

Если вы хотите, чтобы поведение позиции: фиксированное И нужно было толкать исходный контент сверху вниз, вы можете включить второй div в область noscript. Дайте этому div видимость: hidden и высоту, равную высоте div с положением: fixed.

Answer 2

Проблема в том, что вы установили position: fixed в предупреждении. Вы не можете ожидать, что содержимое страницы будет перемещаться вокруг этого, поскольку вы фиксируете его в верхней части окна браузера. Что произойдет, когда вы прокрутите вниз? Содержимое всей страницы перестраивается, чтобы обойти предупреждение?

Хотите, чтобы предупреждение застряло в верхней части окна браузера, даже если оно прокручивается? Если нет, то position: fixed не то, что вы ищете.