Question

**在这里，我想让标题顶部和页面导航完美地融入标题内部。 ** 这里，标题为100px，顶部填充为20px，标题顶部为32px，因此页面导航应为48px。但它适合行高58px。当我改变行高：58px时，它会断开。我失踪了什么？

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: "Open sans", sans-serif;
  box-sizing: border-box;
}

#container {
  height: 100%;
}

header {
  padding: 20px 20px 0 20px;
  background-color: #f8faee;
  position: relative;
  height: 100px;
  box-sizing: border-box;
  border-bottom: 1px solid #eeeeee;
}

.header_top {
  height: 32px;
}

.learning-site-name {
  float: left;
  font-size: 18px;
  color: #000;
  padding-top: 5px;
  line-height: 18px;
}

.pages_navigation {
  line-height: 58px;
  font-size: 14px;
  margin-left: -5px;
  clear: both;
  box-sizing: border-box;
}

.highlighted,
.not-highlighted {
  padding: 0 5px 8px 5px;
}

.highlighted {
  border-bottom: 1px solid black;
  color: black;
}

.not-highlighted {
  cursor: pointer;
  color: #999999;
}

.pages_navigation span:nth-child(2) {
  display: inline-block;
  width: 30px;
}

＆＃13;

<body>
  <div id="container">
    <header>
      <div class="header_top">

        <div class="learning-site-name">Learning Site Name</div>

      </div>

      <!-- creating an empty span inline block to make space in between 2 spans -->
      <div class="pages_navigation">

        <span id="learning-board" class="highlighted">Learning Board</span>

        <span></span>

        <span id="content-files" class="not-highlighted">Content Files</span>

      </div>

    </header>
  </div>
</body>

＆＃13;

Answer 1

这是因为你头的box-sizing: border-box;。设置此属性并设置height 100px; padding-top: 20px;时，表示header的实际高度为80px。换句话说，box-sizing: border-box;使填充和边框计为元素的高度。

更好的方法是移除header的高度，让它的孩子达到它的高度。

如何使内部div的高度加起来为父div高度？线高在这个角色扮演什么角色？

1 个答案: