CODEWITHSUNDEEP
htmlcss
Eric
Eric

Reputation: 3221

Why is the offsetHeight only 2 on the <ul> below?

I've been playing with this for a while, but I can't figure out what's the CSS that's making the offsetHeight of the ul below be only 2. In other words, why is the offsetHeight only 2 for document.querySelector(".myclass").offsetHeight?.

If I get rid of all the CSS it appears as a set of vertical buttons. I see where the width of 380 is getting set, but not the height.

Here's the snippet:

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
button,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
footer,
header,
hgroup,
main,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font-size: 100%;
  font: inherit;
  font-size-adjust: auto;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
  border: 0;
  padding: 0;
  margin: 0;
}

ol,
ul {
  list-style: none;
}

.thingie>ul {
  margin: 0;
  border: 1px solid #BCBEC0;
}

main,
summary,
article,
aside,
details,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

.leftpane {
  position: absolute;
  width: 380px;
  overflow: auto;
  overflow-y: hidden;
  -webkit-transition: margin-left 1s ease-out, width 1s ease-out;
  -moz-transition: margin-left 1s ease-out, width 1s ease-out;
  -o-transition: margin-left 1s ease-out, width 1s ease-out;
  -ms-transition: margin-left 1s ease-out, width 1s ease-out;
  transition: margin-left 1s ease-out, width 1s ease-out;
}

.mypage aside.leftpane {
  display: none;
}

.mypage aside.leftpane {
  display: block;
}

.mypage.mypage_contents .main-mini-toc .leftpane {
  margin-left: -402px;
}

.mypage.mypage_contents.leftpaneshown .main-mini-toc .leftpane {
  margin-left: 0px;
}

form.contentview {
  position: relative;
  padding-bottom: 20px;
}

.mypage_contents.leftpaneshown .contentview {
  margin-left: 250px;
}

.mypage.mypage_contents.leftpaneshown .contentview {
  margin-left: 0px;
}

.pagewrapper {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.pagewrapper {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 15px;
  margin: 0 auto;
}


/* @media screen and (min-width:760px) */

.pagewrapper {
  max-width: 1226px;
}


/* @media screen and (min-width:760px) */

.pagewrapper {
  max-width: 1226px;
}

.pagewrapper {
  padding: 0 15px;
  max-width: 1226px;
  margin: 0 auto;
}

main>.pagewrapper {
  overflow-x: hidden;
}

main {
  display: none;
}

.mypage_contents {
  clear: both;
  display: none;
  margin: 0 auto 23px;
}

.comp::after {
  content: ".";
  display: block;
  height: 0px;
  font-size: 0px;
  visibility: hidden;
  overflow: hidden;
  clear: both;
  border-style: none !important;
  padding: 0 !important;
}

.mypage_contents.beenshown {
  display: block;
}

body {
  font-size: 14px;
  font-size: 1.4rem;
  font-family: Helvetica, Arial, sans-serif;
  color: #373739;
}

html {
  font-size: 62.5%;
}

button {
  overflow: visible;
  background-color: transparent;
  cursor: pointer;
  border: 0;
}

[type=text],
[type=email],
[type=date],
[type=password],
[type=search],
input[type=submit],
input[type=button],
select,
textarea,
button {
  display: inline-block;
  vertical-align: middle;
}

.hideborder>button,
.showborder>button {
  color: #fff;
  vertical-align: inherit !important;
}

.thingie li button {
  padding: 0;
  margin: 0;
  width: 20px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  border-right: 1px solid #bcbec0;
  background: #fff;
}
<!DOCTYPE html>
<html lang="en-GB">

<body>

  <main class="comp mypage_contents beenshown mypage leftpaneshown" id="L9tk">
    <div class="wrapper pagewrapper ">
      <form class="contentview" role="form" action="" novalidate="novalidate">
        <div class="main-mini-toc">
          <aside class="thingie leftpane noreader" style="width: 380px; margin-left: 0px;">

            <ul class="myclass">
              <li class="hideborder" id="searches">
                <button class="recentsearchbtn" type="button">
                  Button1
                </button>
              </li>
              <li class="showborder" id="pages1">
                <button class="recentbtn" type="button">
                  Button2
                </button>
              </li>
            </ul>

          </aside>
        </div>
      </form>
    </div>
  </main>

</body>

</html>

Upvotes: 1

Views: 121

Answers (1)

Zomry
Zomry

Reputation: 1161

If you do not specify an explicit height for an element, it will render its height based on the content, excluding children who 'snapped' out, e.g. position fixed or absolute.

In this case: myClass has two li-elements, who on their own do not specify their height. So it calculates what its height is based on its content. Since the content (a button) has position: absolute applied to it, it is not part of the normal rendering flow. The button is excluded from the content calculation, returning a height of zero, which makes the element with myClass zero pixels high.

It is rendered as two pixels because border is adding a pixel on top and on bottom.

Upvotes: 2

Related Questions