为什么是 height: 100%;溢出parent？

Question

我在使用 CSS 时遇到了一些问题。这是我的代码：

#root {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}
#header {
  border-bottom: 1px solid black;
  width: 100%;
  height: 50px;  /* This is an example, we don't know the exact size */
}
#content {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid red;
}

<div id="root">
 <div id="header">Some content</div>
 <div id="content">Why am I overflowing ?</div>
</div>

⚠️ I don't know exact header size!

如您所见，content div 溢出 root div，但我想要填补空白 space.

我看了很多其他问题，但都是关于 max-width，我没有使用这个属性。

如何用我的内容 div?

填充空白的space

Answer 1

您必须减去页眉的高度

更新

对于表头的动态高度你需要一些 javscript，我相信有更好的解决方案，但这也有效 ;)

let contentEl = document.querySelector('#content'),
    headerProperties = getComputedStyle(document.querySelector('#header')),
    headerHeight = headerProperties['height'];

    contentEl.style.height = `calc(100% - ${headerHeight})`;

#root {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

#header {
  border-bottom: 1px solid black;
  width: 100%;
}

#content {
  width: 100%;
  border-bottom: 1px solid red;
}

<div id="root">
    <div id="header">Some content</div>
    <div id="content">Why am I overflowing ?</div>
</div>

所以不管header的高度是多少，内容都不会溢出

Answer 2

由于不知道header的具体长度，两种解决方法：

为root使用height:max-content（这将使content不再有space）并为content自定义space你想要什么

这将使 header 的 height 不会溢出父元素。

#root {
  width: 500px;
  height: min-content;
  border: 1px solid black;
}
#header {
  border-bottom: 1px solid black;
  width: 100%;

}
#content {
  width: 100%;
  min-height: 100px;
  border-bottom: 1px solid red;
}

<div id="root">
 <div id="header">Some content</div>
 <div id="content">Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for .8 billion.[12]

The website serves as a platform for users to ask and answer questions, and, through membership and active participation, to vote questions and answers up or down similar to Reddit and edit questions and answers in a fashion similar to a wiki.[13] Users of Stack Overflow can earn reputation points and "badges"; for example, a person is awarded 10 reputation points for receiving an "up" vote on a question or an answer to a question,[14] and can receive badges for their valued contributions,[15] which represents a gamification of the traditional Q&A website. Users unlock new privileges with an increase in reputation like the ability to vote, comment, and even edit other people's posts.[16]</div>
</div>

Answer 3

我会转换为简单的 flexbox 布局。

#root {
  width: 500px;
  height: 100px; /* 300px; */
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

#header {
  border-bottom: 1px solid black;
}

#content {
  flex: auto;
  border-bottom: 1px solid red;
}

<div id="root">
  <div id="header">Some content</div>
  <div id="content">Why am I overflowing ?</div>
</div>

为什么是 height: 100%;溢出parent？

Why is height: 100%; overflowing parent?

html

css

height