Высота 0 не скрывает DOM

Question

Я пытаюсь скрыть DOM, применяя height: 0px .Я надеюсь, что из-за отступов он не полностью скрывает DOM. Я также дал свойство border-box .Я использую высоту вместо свойства отображения, чтобы добиться плавности (перехода) при скрытии.Пожалуйста, используйте код ниже

var body = document.body;
var banner = document.getElementById('banner');
var close  = document.getElementById('close');
var reset = document.getElementById('reset');
close.onclick = closeBanner;
reset.onclick = resetHeight;

function closeBanner(){
	banner.style.height = 0;
}

function resetHeight(){
	banner.style.height = '40px';
}

.banner{
  height: 40px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background: #2fc5c5;
    color: #fff;
    padding: 7px 15px;
    transition: height .3s ease;
    border: 1px solid #10b5b4;

}
.close{
  float: right;
  cursor:pointer;
  font-size: 18px;
  background: #fff;
  padding: 3px;
  color: #3d3d3d;
}

<div class="banner" id="banner">
  <span> Content Goes here</span>
  <span class="close" id='close'>x</span>
</div>
 <button id="reset"> Reset Height</button>

См. Скрипку ЗДЕСЬ

Answer 1

Думаю, это поможет вам решить вашу проблему.

var body = document.body;
var banner = document.getElementById('banner');
var close  = document.getElementById('close');
var reset = document.getElementById('reset');
close.onclick = closeBanner;
reset.onclick = resetHeight;

function closeBanner(){
	banner.style.height = 0;
  banner.style.padding = 0;
  banner.style.border = 0;
}

function resetHeight(){
	banner.style.height = '40px';
}

.banner{
  height: 40px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background: #2fc5c5;
    color: #fff;
    padding: 7px 15px;
    transition: height .3s ease;
    border: 1px solid #10b5b4;

}
.close{
  float: right;
  cursor:pointer;
  font-size: 18px;
  background: #fff;
  padding: 3px;
  color: #3d3d3d;
}

<div class="banner" id="banner">
  <span> Content Goes here</span>
  <span class="close" id='close'>x</span>
</div>
 <button id="reset"> Reset Height</button>

Answer 2

var body = document.body;
var banner = document.getElementById('banner');
var close  = document.getElementById('close');
var reset = document.getElementById('reset');
close.onclick = closeBanner;
reset.onclick = resetHeight;

function closeBanner(){
	banner.style.height = 0;
  banner.style.padding = 0;
  banner.style.border = 0;
}

function resetHeight(){
	banner.style.height = '40px';
}

.banner{
  height: 40px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    background: #2fc5c5;
    color: #fff;
    padding: 7px 15px;
    transition: height .3s ease;
    border: 1px solid #10b5b4;

}
.close{
  float: right;
  cursor:pointer;
  font-size: 18px;
  background: #fff;
  padding: 3px;
  color: #3d3d3d;
}

<div class="banner" id="banner">
  <span> Content Goes here</span>
  <span class="close" id='close'>x</span>
</div>
 <button id="reset"> Reset Height</button>

Answer 3

Это происходит из-за padding и border.Вам нужно добавить еще css вместе с height: 0;

padding-top: 0px;
padding-bottom: 0px;
border: none;

Answer 4

Вместо того, чтобы делать height:0, лучше потушить его следующим способом:

$("#banner").fadeOut("slow");

Преимущества использования fadeOut():

1. Вы надеваетене нужно использовать дополнительные CSS, такие как height:0 или transition и т. д.
2. . Это обеспечивает плавный переход.
3. . Для написания этого требуется всего одна строка, что уменьшает размер кода.

Answer 5

С этим методом вы столкнетесь с двумя отдельными проблемами.

1. Причина, по которой он все еще видим, заключается в том, что он имеет отступ по умолчанию, который также необходимо установить на 0.
2. Контейнер имеет границу, поэтому даже если вы установите высоту 0 и отступы 0, вы все равно увидите что-то.Таким образом, вы также должны были бы удалить границу по клику:)