HTML: CSS: динамически отображаемый DIV влияет на другие DIV

Question

У меня есть небольшой шаблон, который может объяснить мой вопрос в целом.

$('#someBtn').on('click', function(){
	$('.notification-panel').toggle();
});

.wrapper {
  height: 100%;
  width: 100%;
}

.notification-panel {
  background: green;
  width: 100%;
  display: none;
}

.content {
  background: yellow;
  width: 100%;
  height: 100px;
  overflow: auto;
}

.footer {
  background: blue;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='notification-panel'>
    Some notification
  </div>
  <div class='content'>
    Scaling to screen using vh and vw <br>
    Line 2 <br>
    Line 3 <br>
    Line 4 <br>
    Line 5 <br>
    Line 6 <br>
    Line 7 <br>
    Line 8 <br>
    Line 9 <br>
    Line 10 <br>
    Line 11 <br>
    Line 12 <br>
    Line 13 <br>
    Line 14 <br>
    Line 15 <br>
    Line 16 <br>
    Line 17 <br>
    Line 18 <br>
    Line 19 <br>
    Line 20 <br>
    Line 21 <br>
    Line 22 <br>
    Line 23 <br>
    Line 24 <br>
    <button id ="someBtn">
      Click me
    </button>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>

Как видите, у меня есть динамический элемент «панель уведомлений», который влияет на нижние элементы (после переключения он сдвигает нижние элементы вниз). Моя цель - уменьшить высоту прокручиваемого элемента контента без каких-либо сдвигов. Я полагаю, что flex (flex-shrink / flex-grow) должен решить проблему, но я не знаю, как я могу применить его к моему шаблону.

UPD1: позиция: исправлено для элемента панели уведомлений не решает проблему. Он просто перекрывает верхнюю часть моего элемента «content», но моя цель - уменьшить высоту элемента «content».

Answer 1

Flex сделает это - просто согните вашу обертку, уберите высоту из вашего содержимого div и дайте ей сгибаться-расти (не сжиматься)

$('#someBtn').on('click', function() {
  $('.notification-panel').toggle();
});

html,
body {
  height: 100%;
  margin: 0;
}

.wrapper { /* this is optional - you can apply this directly to the body */
  display:flex;
  flex-direction:column;
  height: 100%;
}

.notification-panel {
  background: green;
  width: 100%;
  display: none;
}

.content {
  flex-grow:1;               /* this makes the content panel fill the remaining space */
  background: yellow;
  overflow: auto;
}

.footer {
  background: blue;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='notification-panel'>
    Some notification
  </div>
  <div class='content'>
    Scaling to screen using vh and vw <br> Line 2 <br> Line 3 <br> Line 4 <br> Line 5 <br> Line 6 <br> Line 7 <br> Line 8 <br> Line 9 <br> Line 10 <br> Line 11 <br> Line 12 <br> Line 13 <br> Line 14 <br> Line 15 <br> Line 16 <br> Line 17 <br> Line 18
    <br> Line 19 <br> Line 20 <br> Line 21 <br> Line 22 <br> Line 23 <br> Line 24 <br>
    <button id="someBtn">
      Click me
    </button>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>

Answer 2

Используйте position: absolute, чтобы не изменять высоту.Смотрите ниже:

var isShowing = false;
$('#someBtn').on('click', function(){
	if ( !isShowing ) {
     isShowing = true;
     $('.notification-panel').addClass('show') 
  }
  else {
    $('.notification-panel').removeClass('show')
    isShowing = false;
  }
});

.wrapper {
  height: 100%;
  width: 100%;
  position:relative;
}

.notification-panel {
  background: green;
  width: 100%;
  
  position: absolute; /* make floating, so don't change height */
  opacity: 0.0; /* hide on load */
  pointer-events: none;
  transform: translateY( -20px );
  transition: opacity 300ms, transform 300ms; /* animate */
}

.show { /* becomes visible  */
  opacity: 1.0;
  transform: translate(0);
}

.content {
  background: yellow;
  width: 100%;
  height: 100px;
  overflow: auto;
}

.footer {
  background: blue;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='notification-panel'>
    Some notification
  </div>
  <div class='content'>
    Scaling to screen using vh and vw <br>
    Line 2 <br>
    Line 3 <br>
    Line 4 <br>
    Line 5 <br>
    Line 6 <br>
    Line 7 <br>
    Line 8 <br>
    Line 9 <br>
    Line 10 <br>
    Line 11 <br>
    Line 12 <br>
    Line 13 <br>
    Line 14 <br>
    Line 15 <br>
    Line 16 <br>
    Line 17 <br>
    Line 18 <br>
    Line 19 <br>
    Line 20 <br>
    Line 21 <br>
    Line 22 <br>
    Line 23 <br>
    Line 24 <br>
    <button id ="someBtn">
      Click me
    </button>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>

Answer 3

Вы можете использовать свойство CSS ниже для панели уведомлений. Также переместите панель внутри содержимого.

position: -webkit-sticky;
position: sticky;
top: 0;

Проверьте этот пример

$('#someBtn').on('click', function(){
	$('.notification-panel').toggle();
});

.wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}

.notification-panel {
  background: green;
  width: 100%;
  display: none;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.content {
  background: yellow;
  width: 100%;
  height: 100px;
  overflow: auto;
}

.footer {
  background: blue;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='content'>
    <div class='notification-panel'>
        Some notification
    </div>
    Scaling to screen using vh and vw <br>
    Line 2 <br>
    Line 3 <br>
    Line 4 <br>
    Line 5 <br>
    Line 6 <br>
    Line 7 <br>
    Line 8 <br>
    Line 9 <br>
    Line 10 <br>
    Line 11 <br>
    Line 12 <br>
    Line 13 <br>
    Line 14 <br>
    Line 15 <br>
    Line 16 <br>
    Line 17 <br>
    Line 18 <br>
    Line 19 <br>
    Line 20 <br>
    Line 21 <br>
    Line 22 <br>
    Line 23 <br>
    Line 24 <br>
    <button id ="someBtn">
      Click me
    </button>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>

Answer 4

Может быть, вам нужен этот код здесь

Описание: когда вы нажимаете кнопку, тогда блок отображения стиля notification-panel устанавливается функцией переключения jquery.блочный элемент обычно не вводится в его выигрышную область другими элементами.Таким образом, вы можете говорить, что абсолютный элемент notification-panel position : { absolute} a не влияет на внутреннюю высоту другого элемента.Я также добавляю простую анимацию toggle к slideToggle(300) слайду и переключаю анимацию на 300 миллисекунд.может, это решило твою проблему.

$('#someBtn').on('click', function(){
	$('.notification-panel').slideToggle(300);
});

.wrapper {
  height: 100%;
  width: 100%;
}

.notification-panel {
  background: green;
  width: 100%;
  display: none;
  position:fixed;
  top: 0;
  width: 100%;
}

.content {
  background: yellow;
  width: 100%;
  height: 100px;
  overflow: auto;
}

.footer {
  background: blue;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='notification-panel'>
    Some notification
  </div>
  <div class='content'>
    Scaling to screen using vh and vw <br>
    Line 2 <br>
    Line 3 <br>
    Line 4 <br>
    Line 5 <br>
    Line 6 <br>
    Line 7 <br>
    Line 8 <br>
    Line 9 <br>
    Line 10 <br>
    Line 11 <br>
    Line 12 <br>
    Line 13 <br>
    Line 14 <br>
    Line 15 <br>
    Line 16 <br>
    Line 17 <br>
    Line 18 <br>
    Line 19 <br>
    Line 20 <br>
    Line 21 <br>
    Line 22 <br>
    Line 23 <br>
    Line 24 <br>
    <button id ="someBtn">
      Click me
    </button>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>

Answer 5

Вы можете сделать это без flex.Если вы определите панель уведомлений как fixed и с top: 0 у вас будет то, что вы хотите.Вот рабочий пример:

$('#someBtn').on('click', function(){
  $('.notification-panel').toggle();
});

.wrapper {
  height: 100%;
  width: 100%;
}

.notification-panel {
  background: green;
  width: 100%;
  display: none;
  // Here is the addition
  position: fixed;
  top: 0;
}

.content {
  background: yellow;
  width: 100%;
  height: 100px;
  overflow: auto;
}

.footer {
  background: blue;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='notification-panel'>
    Some notification
  </div>
  <div class='content'>
    Scaling to screen using vh and vw <br>
    Line 2 <br>
    Line 3 <br>
    Line 4 <br>
    Line 5 <br>
    Line 6 <br>
    Line 7 <br>
    Line 8 <br>
    Line 9 <br>
    Line 10 <br>
    Line 11 <br>
    Line 12 <br>
    Line 13 <br>
    Line 14 <br>
    Line 15 <br>
    Line 16 <br>
    Line 17 <br>
    Line 18 <br>
    Line 19 <br>
    Line 20 <br>
    Line 21 <br>
    Line 22 <br>
    Line 23 <br>
    Line 24 <br>
    <button id ="someBtn">
      Click me
    </button>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>