为什么高度是：100%；溢出的父母？

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>

⚠️我不知道确切的标题大小！

如您所见，内容 div溢出了根 div，但我想填充空旷的空间。

我读了很多其他问题，但它们都是关于 max-width 的，而且我没有使用这个属性。

如何用我的 content div 填充空白区域？

Answer 1

我会转换为简单的 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>

Answer 2

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

对 root 使用 height:max-content （这将使 content 具有没有更多空间）并根据需要自定义 content 的空间

这将使 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 $1.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

您必须减去标题的高度

更新

以获得标题的动态高度
你需要一些 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 的高度是多少，内容都不会溢出