Question

div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
}

div.container div.advanced-items span {
  height: 100px;
}

<div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span>3. item</span>
    <!-- more items here -->
  </div>
</div>

div.advanced-items的高度值设置为100%，但在某种程度上等于整个div.container的高度。但是考虑到孩子的身高，我需要填充div.container的剩余高度。

请帮我，怎么做？

Answer 1

考虑到孩子的身高，我需要填写div.container的剩余高度。 究竟是怎么回事，只需将border添加到div.advanced-items即可看到它包裹了多少空间

div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid black;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
  border: 1px solid black;
}

div.container div.advanced-items span {
  height: 100px;
}

<div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span>3. item</span>
    <!-- more items here -->
  </div>
</div>

现在，您将div.advanced-items包裹了除上面divs包裹的包裹之外的所有左边的高度，但是您可以通过将height设置为{ {1}}

100%

div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid black;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: 1px solid black;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  height: 100%;
  border: 1px solid black;
}

div.container div.advanced-items span {
  height: 100px;
}

Answer 2

您要这样吗？：

<div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div style="--item-count:3;" class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span>3. item</span>
    <!-- more items here -->
  </div>
</div>

div.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.container div.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.container div.advanced-items {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  overflow-y: scroll;
  height: 100%;
}

div.container div.advanced-items span {
  height: 100px;
}

还是这个？：

<div class="container">
  <div class="block">
    <span>some data here</span>
  </div>
  <div class="block">
    <span>some data here</span>
  </div>
  <div style = "--itemCount:3;" class="advanced-items">
    <span>1. item</span>
    <span>2. item</span>
    <span >3. item</span>
    <!-- more items here -->
  </div>
</div>

private void button2_Click(object sender, EventArgs e)
{
  if ( textBox1.Text == "" )
  {
    MessageBox.Show(...);
    return;
  }
  answer = Convert.ToInt32(textBox1.Text);
  ...
}

CSS-flexbox高度100％不考虑儿童的身高

2 个答案: