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

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

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

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

Answer 2

Решение может зависеть от того, как вы хотите / должны реализовать этот блок уведомлений. Если вы обновите страницу с помощью 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>

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

Answer 3

Я предполагаю, что 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;
}

Answer 4

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

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

В качестве альтернативы вы можете использовать min-height и min-width.