give height of an unset height element

Question

hi I have this codes in HTML

<div class="box"><!-- a long text --></div>

.box have 10 line inner text

the CSS of .box is

.box{
    width:200px;
    height: initial;
    overflow: auto;
    min-height: 20px;
}

I want to get height of .box , I use this

$('.box').css('height');

but giv me 0px

the up codes are the sample for you better understand

the real codes of my element

    <li>                 <p class="proSliderText">this is a p tag</p>
 </li>

css

 .proSliderText{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-15%;
    min-height: 40px;
    margin-top: -40px;
    width:20%;
    font-size: 4vw;
    height: initial;
}

parent tag CSS

    .proSlider li{
    list-style-type: none;
    position: absolute;
    top:0;
    left:0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Use `clientHeight` as in my answer. – connexo Aug 11 '18 at 12:21 — connexo, Aug 11 '18 at 12:21

Ankit Agarwal · Answer 1 · 2018-08-11T12:26:22.807

0

If the div with class box is not empty then the code $('.box').css('height') should work:

console.log($('.proSliderText').css('height'));

.proSliderText {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15%;
  min-height: 40px;
  margin-top: -40px;
  width: 20%;
  font-size: 4vw;
  height: initial;
}

.proSlider li {
  list-style-type: none;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="proSlider">
  <li>
    <p class="proSliderText"> this is a p tag </p>
  </li>
</ul>

edited Aug 11 '18 at 12:26

answered Aug 11 '18 at 12:11

Ankit Agarwal

30,378
5
37
62

I edit my post please see that again – good guy Aug 11 '18 at 12:19
this way return me 0px too – good guy Aug 11 '18 at 12:25
1

@goodguy it works. See updated answer – Ankit Agarwal Aug 11 '18 at 12:26
yes its work I had a little bug in my jQuery bugs :D - excuse me and Thanks a lot – good guy Aug 11 '18 at 12:37
@AnkitAgrwal I,ve done that – good guy Aug 11 '18 at 12:47

score 0 · Answer 2 · answered Aug 11 '18 at 12:15

No jQuery necessary here.

console.log(document.querySelector('.box').clientHeight+'px');

.box{ width:200px; height: initial; overflow: auto; min-height: 20px; }

<div class="box">Die US-Amerikaner CHELSEA GRIN haben ihr erstes Album mit Tom Barber (ehemals Lorna Shore) als ihren neuen Sänger angekündigt. Am 13. Juli wird "Eternal Nightmare" bei Rise Records erscheinen und mit "Dead Rose" gibt es auch einen ersten Vorgeschmack, der beweist, daß sich der Nachfolger von Alex Koehler nahtlos in das Bandgefüge einfügt. In den vergangenen Monaten hat sich neben ALEX KOEHLER (Vocals) auch JACOB HARMOND (Guitar) entschieden, aus persönlichen Gründen die Band zu verlassen. CHELSEA GRIN haben sich mit diversen Deutschlandtourneen und ihrem letzten Album "Self Inflicted" in die Herzen der Deathcore-und Metalcore-Fans gespielt. Die US-Amerikaner CHELSEA GRIN haben ihr erstes Album mit Tom Barber (ehemals Lorna Shore) als ihren neuen Sänger angekündigt. Am 13. Juli wird "Eternal Nightmare" bei Rise Records erscheinen und mit "Dead Rose" gibt es auch einen ersten Vorgeschmack, der beweist, daß sich der Nachfolger von Alex Koehler nahtlos in das Bandgefüge einfügt. In den vergangenen Monaten hat sich neben ALEX KOEHLER (Vocals) auch JACOB HARMOND (Guitar) entschieden, aus persönlichen Gründen die Band zu verlassen. CHELSEA GRIN haben sich mit diversen Deutschlandtourneen und ihrem letzten Album "Self Inflicted" in die Herzen</div>

I edit my post please see that again – good guy Aug 11 '18 at 12:20 — good guy, Aug 11 '18 at 12:20

give height of an unset height element

2 Answers2