Заполнение определенное количество пробелов на веб-сайте

Question

В моем веб-приложение, я использую следующий CSS, чтобы предоставить замечания/сообщения об ошибках:

#notice { 
    border: 1px solid green; 
    padding: 1em; 
    margin: 1em; 
    margin-bottom: 2em; 
    background-color: lightgreen; 
    font: bold sans-serif; 
    color: darkgreen 
} 

Но когда уведомление не требуется, я хочу, чтобы иметь белое пространство, равное на количество места, которое было бы занято этим уведомлением. Я хочу сделать это, чтобы мои веб-страницы выглядели согласованными, а элементы на странице не сдвигались вверх/вниз в зависимости от того, есть ли уведомление или нет.

Answer 1

Вы можете установить фиксированную высоту и ширину для div.

#notice { 
    .... 
    height: 200px; 
    width: 100%; 
} 

В качестве альтернативы вы можете использовать минимальную высоту и минимальную ширину.

Answer 2

Я сделал это, установив фиксированную высоту.

Я также слышал аргумент о том, что все в порядке, чтобы страница обрушилась вниз (так работает stackoverflow), потому что она привлекает внимание к сообщению, и это хорошо.

Answer 3

Решение может зависеть от того, как вы хотите/должны реализовать этот блок уведомлений. Если вы обновите страницу с помощью Ajax (без грамотного деградации, отключение JS до нормального состояния), я настоятельно рекомендую делать это с помощью модальных окон, таких как Facebook, - это приятно и удобно. Если у вас не было возможности использовать модальные окна это может быть что-то вроде:

#notice{ height: 100px; margin: 1em 1em 2em } /* #notice can be a wrapper with basic dimensions */ 
.error{ border: 1px solid red; } /* reuse the same block */ 
.info{ border: 1px solid green; } /* reuse the same block */ 

И в HTML соответственно:

<div id="notice"></div> 

состояние ошибки:

<div id="notice" class="error"> Your error message </div> 

информация состояние:

<div id="notice" class="info"> Your info message </div> 

Из cour se вы можете столкнуться с проблемами с высотой div #notice, когда сообщение слишком длинное, но это еще одна проблема:

Answer 4

Я предполагаю, что div с #notice не будет там, если вам не нужно Это. Почему бы не использовать соседний селектор, как это. Он не будет работать в некоторых браузерах, таких как IE6. Дайте элементу следующий за ним класс «следующий» или что-то похожее. Там все равно будет какая-то разница, потому что у вас есть 2px с границы там.

#notice { 
    border: 1px solid green; 
    padding: 1em; 
    margin: 1em; 
    margin-bottom: 2em; 
    background-color: lightgreen; 
    font: bold sans-serif; 
    color: darkgreen 
} 
.following { 
    margin-top:4em 
} 
#notice + .following { 
    margin-top:2em; 
}