Início / coding / Perguntas / 79485724
Accepted
levent001
Asked: 2025-03-05 15:24:59 +0800 CST

Remover altura do contêiner CSS

  • 772

Estou tentando configurar um cronômetro no meu site usando Javascript e CSS:

var h3 = document.getElementsByTagName("h3");
h3[0].innerHTML = "Countdown Timer With JS";

var sec = 1800,
  countDiv = document.getElementById("timer"),
  secpass,
  countDown = setInterval(function () {
      'use strict';

      secpass();
  }, 1000);

function secpass() {
  'use strict';

  var min     = Math.floor(sec / 60),
      remSec  = sec % 60;

  if (remSec < 10) {

      remSec = '0' + remSec;

  }
  if (min < 10) {

      min = '0' + min;

  }
  countDiv.innerHTML = min + ":" + remSec;

  if (sec > 0) {

      sec = sec - 1;

  } else {

      clearInterval(countDown);

      countDiv.innerHTML = 'countdown done';

  }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    font: normal bold 16px/normal tahoma;
}

article {
    width: 300px;
    text-align: center;
    background-color: #68b04d;
    border-radius: 10px;
    margin: 50px auto 20px;
    padding: 5px;
    overflow: hidden;
    box-shadow: 3px 3px 10px #ccc;
}

article h3 {
    padding: 10px;
    color: #fff;
}
article .count {
    padding: 5px;
}
article #timer{
    padding: 5px;
    color: crimson;
    background-color: aliceblue;
    border-radius: 2px;
}
<!-- Creat Countdown Timer -->
<article class="clock" id="model3">
  <h3></h3>

  <div class="count">
    <div id="timer"></div>
  </div>
</article>

O modelo de trabalho está em https://codepen.io/falak786/pen/oddYYd

O que eu NÃO quero é o título que atualmente está assim no código JS:

h3[0].innerHTML = "Countdown Timer With JS";

Então eu mudo para

h3[0].innerHTML = "";

Ainda assim, o problema é que HEIGHT NÃO está indo embora. Ele está permanecendo fixo, como mostrado pelo marcador azul: insira a descrição da imagem aqui

Também tentei alterar a <h3>configuração da tag no meu arquivo CSS e também alterar o <h3>nome da tag no código acima para um <hz>nome de tag aleatório, mas a altura ainda permanece lá, sem texto.

O que posso fazer para remover essa altura?

javascript

2 respostas

  1. Best Answer

    O <h3>elemento tem padding: 10;. Se você não precisar dele, remova todo o código relacionado do HTML, CSS, JS:

    var sec = 1800,
  countDiv = document.getElementById("timer"),
  secpass,
  countDown = setInterval(function() {
    'use strict';

    secpass();
  }, 1000);

function secpass() {
  'use strict';

  var min = Math.floor(sec / 60),
    remSec = sec % 60;

  if (remSec < 10) {

    remSec = '0' + remSec;

  }
  if (min < 10) {

    min = '0' + min;

  }
  countDiv.innerHTML = min + ":" + remSec;

  if (sec > 0) {

    sec = sec - 1;

  } else {

    clearInterval(countDown);

    countDiv.innerHTML = 'countdown done';

  }
}
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  font: normal bold 16px/normal tahoma;
}

article {
  width: 300px;
  text-align: center;
  background-color: #68b04d;
  border-radius: 10px;
  margin: 50px auto 20px;
  padding: 5px;
  overflow: hidden;
  box-shadow: 3px 3px 10px #ccc;
}

article .count {
  padding: 5px;
}

article #timer {
  padding: 5px;
  color: crimson;
  background-color: aliceblue;
  border-radius: 2px;
}
    <!-- Creat Countdown Timer -->
<article class="clock" id="model3">
  <div class="count">
    <div id="timer"></div>
  </div>
</article>

    Se você for usá-lo mais tarde, mas não quiser o espaço que ele ocupa enquanto estiver vazio, você pode adicionar o uso da :emptypseudoclasse para não renderizá-lo enquanto estiver vazio:

    article h3:empty {
  display: none;
}


    // add h3 content after 2000ms
setTimeout(() => {
  document.querySelector("h3")
   .innerHTML = "Countdown Timer With JS";
}, 2000);

var sec = 1800,
  countDiv = document.getElementById("timer"),
  secpass,
  countDown = setInterval(function() {
    'use strict';

    secpass();
  }, 1000);

function secpass() {
  'use strict';

  var min = Math.floor(sec / 60),
    remSec = sec % 60;

  if (remSec < 10) {

    remSec = '0' + remSec;

  }
  if (min < 10) {

    min = '0' + min;

  }
  countDiv.innerHTML = min + ":" + remSec;

  if (sec > 0) {

    sec = sec - 1;

  } else {

    clearInterval(countDown);

    countDiv.innerHTML = 'countdown done';

  }
}
    article h3:empty {
  display: none;
}



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  font: normal bold 16px/normal tahoma;
}

article {
  width: 300px;
  text-align: center;
  background-color: #68b04d;
  border-radius: 10px;
  margin: 50px auto 20px;
  padding: 5px;
  overflow: hidden;
  box-shadow: 3px 3px 10px #ccc;
}

article h3 {
  padding: 10px;
  color: #fff;
}

article .count {
  padding: 5px;
}

article #timer {
  padding: 5px;
  color: crimson;
  background-color: aliceblue;
  border-radius: 2px;
}
    <!-- Creat Countdown Timer -->
<article class="clock" id="model3">
  <h3></h3>
  <div class="count">
    <div id="timer"></div>
  </div>
</article>

    • 4

  2. Ou você pode simplesmente verificar em JavaScript depois de atribuir texto a h3:

    var h3 = document.getElementsByTagName("h3");
h3[0].innerHTML = "Countdown Timer With JS";
//h3[0].innerHTML = "";
if (h3[0].innerHTML == "") {
  h3[0].style.padding = "0px";
} else {
  h3[0].style.padding = "10px";
}
    • 0

relate perguntas