HTML：CSS：动态显示的DIV影响其他DIV

时间：2019-03-19 11:29:47

标签： javascript jquery html css flexbox

我有一个小模板，可以大致解释我的问题。 

$('#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>

如您所见，我有一个动态的“ notification-panel”元素，该元素会影响底部的元素（将其向下拖动后，将其向下移动）。我的目标是缩小可滚动“内容”元素的高度，而不会发生任何变化。我想flex（flex-shrink / flex-grow）应该可以解决问题，但是我不知道如何将其应用于模板。

UPD1：“ notification-panel”元素的“ position：fixed”无法解决问题。它只是与“内容”元素的顶部重叠，但我的目标是缩小“内容”元素的高度。

5 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

您可以不使用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>

答案 2 :(得分：0)

您可以在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>

答案 3 :(得分：0)

也许这里需要您提供此代码

说明：单击按钮后，jquery切换功能将notification-panel设置样式显示块。通常不会在其获胜区域中输入其他元素的格挡元素。因此，您可以说notification-panel position : { absolute}的位置绝对元素不会影响其他内部元素的高度。我还在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>

答案 4 :(得分：0)

将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>

相关问题
最新问题