Question

我有以下html代码：

import luigi

class GTask(luigi.Task):
    def requires():
        return BTask()
    
    def run():
        if check_b_outout(self.input()):
            yield CTask()
            yield DTask()
        else:
            yield ETask()
            yield FTask()

 .generalGrid {
      display: grid;
      grid-template-columns: 0.6fr 1.4fr;
      grid-column-gap: 1vh;
      grid-row-gap: 1vh;
}

.generalGrid > div {
  background-color: #ffd8a8;
}

.tournament {
  height: 24vh;
  max-height: 24vh;
  grid-column: 1;
}

.team {
  height: 50vh;
  max-height: 50vh;
  grid-column: 1;
}

.fss {
  height: 24vh;
  max-height: 24vh;
  grid-column: 1;
}

.squad {
  height: 100vh;
  max-height: 100vh;
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 4;

}

.substitutesFlex {
  display: flex;
  background-color: #ffd8a8;
  height: 20vh;
  max-height: 20vh;
  margin-top: 1vh;

}

.container {
  height: 50vh;
  max-height: 50vh;
  width: 50%;
  max-width: 50%;
  background-color: #f55555;
}

我不知道为什么div“容器”中的部分仅考虑宽度，却不考虑高度限制。

我已经阅读了一些有关定义父级的高度和最大高度的文章，但这没有用。

Answer 1

您必须指定容器的溢出规则，以便容器必须隐藏正在溢出的div或显示滚动条。

在overflow: auto类中放入.container即可完成工作。

如果您希望容器中的内容不会溢出，也请

。然后，您需要在%中而不是vh中给子级高度，因为vh始终表示window or viewport的虚拟高度。

您需要删除网格项目的高度和最大高度，并为.generalGrid中的.substitutesFlex和%而不是vh中的.generalGrid { display: grid; grid-template-columns: 0.6fr 1.4fr; grid-column-gap: 1%; grid-row-gap: 1%; height: 80% } .generalGrid > div { background-color: #ffd8a8; } .tournament { grid-column: 1; } .team { grid-column: 1; } .fss { grid-column: 1; } .squad { height: 100%; grid-column: 2; grid-row-start: 1; grid-row-end: 4; } .substitutesFlex { display: flex; background-color: #ffd8a8; height: 20%; margin-top: 1%; } .container { height: 50vh; max-height: 50vh; width: 50%; max-width: 50%; background-color: #f55555; //overflow: auto; }设置高度。

<div class="container">
  <section class="generalGrid">
    <div class="tournament" ></div>
    <div class="team"></div>
    <div class="fss" ></div>
    <div class="squad" ></div>
  </section>
  <section class="substitutesFlex">
    <div class="substitutes"></div>
  </section>
</div>

    switch (command)
    {
    case 1: if (command == 'b')
    {
        void displayBalance(float &currentbalance);
        displayBalance(currentbalance);
    }
            break;
    case 2: if (command == 'w')
    {
        float Withdraw(float &accountbal);
        float Withdraw();
    }
            break;
    case 3: if (command == 'c')
    {
        float Credit(float &currentbalance);
        Credit(currentbalance);
    }
            break;
    default: cout << "\nChoose a valid option." << endl;
        break;
    }

Answer 2

您已经在vh中将.container和断面高度设置为一个单位，该单位仅取决于窗口高度，因此它完全按照您的命令进行设置。这是单位和数学的情况。
我写的css和html比英语要好-看一下已被剪断的片段，如有任何问题，请发表评论。

body{ background: #555; text-align: center}
.box{
  height: 50vh;
  width: 50%;
  background: blue;
}
.grid{
display: grid;
grid-template-columns: 0.6fr 1.4fr;
grid-column-gap: 1vh;
grid-row-gap: 1vh;
background: #fff;
}
.one{
height: 12.5vh;
grid-column: 1;
background: red;
}
.two{
height: 25vh;
grid-column: 1;
background: gold;
}
.three{
height: 12.5vh;
grid-column: 1;
background: #0d0;
}
.four{
height: 100%;
grid-column: 2;
grid-row-start: 1;
grid-row-end: 4;
background: #adf
}
.five{
background: plum
}
.flex {
display: flex;
height: 20vh;
margin-top: 1vh;
background: pink;
}

<div class="box">
<section class="grid">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three - to long content will break fixed sizes</div>
<div class="four">four <p>grid is still not fully supported</p><p>grid does not mean responsive</p></div>
</section>
<section class="flex">
<div class="five">five</div>
<div>flex does not mean responsive</div>
</section>
</div>
<p>and what you gonna do with other half?</p>

带有%和height的小问题-100％正常，其他值出乎意料的错误。

为什么section不尊重高度但尊重父div的宽度？

2 个答案: