Question

我有一个header一个main和一个footer。标题和字幕具有固定的高度。 main的最小高度为100％ - 250px（页眉+页脚）。我想将主要内部的div id="content"扩展到主要的完整高度。为什么不工作？

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}

header {
  background-color: #131b23;
  border-bottom: 6px solid #0f151a;
  text-align: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 170px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

main {
  text-align: center;
  min-height: calc(100% - 250px);
  /* Header 170px + Footer 80px = 250px */
  background-color: blue;
}

#content {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  background-color: red;
  min-height: 100%;
}

footer {
  background-color: #131b23;
  border-top: 6px solid #0f151a;
  text-align: center;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  width: 100%;
}

<header>
</header>

<main>
  <div id="content">
    Text 123
  </div>
</main>

<footer>
</footer>

Answer 1

如果父级已将身高相对于父级的百分比定义为min-height，则

height将起作用。

在您的情况下，内容div的父级为main，而main的值为min-height : calc(100% - 250px)，而不是height。将主要的min-height更改为height。

Answer 2

使用此css将内容高度设置为100％

#content {
  width: 65%;
  margin-left: auto;
  min-height:100%;  
   margin-right: auto;
  background-color: red;

}

段

html,body {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}
main {
  text-align: center;
 
   min-height: calc(100% - 250px);

  /* Header 170px + Footer 80px = 250px */
  background-color: blue;
}
header {
  background-color: #131b23;
  border-bottom: 6px solid #0f151a;
  text-align: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 170px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}
#content {
  width: 65%;
  margin-left: auto;
 min-height:100%; 
   margin-right: auto;
  background-color: red;
  
}

footer {
  background-color: #131b23;
  border-top: 6px solid #0f151a;
  text-align: center;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  width: 100%;
}

<header>

</header>

<main id=mai >
  <div id="content" style="height:100px">
    Text 123Text 123Text 123Text 123Text 123
  </div>
</main>

<footer>

</footer>
<style>

</style>

为什么身高100％不起作用？

因为主要内容的高度设置为100％，这意味着设置适合内容中所有信息的内容的高度。

Answer 3

只要页面高于内容，这就有效。您可能需要在整页视图中显示结果。

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}

header {
  background-color: #131b23;
  border-bottom: 6px solid #0f151a;
  text-align: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 170px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 99;
}

main {
  text-align: center;
  min-height: calc(100% - 250px);
  /* Header 170px + Footer 80px = 250px */
  background-color: blue;
position:relative;
}

#content {
  width: 65%;
  margin-left: 17.5%;
  margin-right: 17.5%;
  background-color: red;
  height: 100%;
position:absolute
}

footer {
  background-color: #131b23;
  border-top: 6px solid #0f151a;
  text-align: center;
  height: 80px;
  z-index: 98;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  width: 100%;
}

<header>

</header>

<main>
  <div id="content">
    Text 123
  </div>
</main>

<footer>

</footer>
</body>

</html>

为什么百分比最小高度不适用于儿童div？

3 个答案: