Question

我需要使 .content div使用剩余的屏幕高度。我不知道 .header 的高度是多少-我不能使用calc（100vh-headerHeight）

HTML结构

ROW_NUMBER

CSS

WITH cte AS (
    SELECT *, ROW_NUMBER() OVER (PARTITION BY AccountNumber ORDER BY ID DESC) rn
    FROM TransactionInfo
)

SELECT
    AccountNumber,
    SUM(Credit) AS TotalCredit,
    SUM(Debit) AS TotalDebit,
    MAX(CASE WHEN rn = 1 THEN CurrentBalance END) AS CurrentBalance
FROM cte
GROUP BY
    AccountNumber;

尝试过

vagrant up

使用100vh无效，因为它会产生一些垂直滚动（具有 .header 的高度）

<html>
    <body>
        <div class="header">header</div>
        <div class="content">content</div>
    </body>
</html>

它应该看起来像这样

html, body {
    height: 100%;
}

Answer 1

将<body>元素设置为弹性容器。
然后，您可以设置.content，使其能够增长。

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: lightgreen;
}

.content {
  flex: 1 0 auto;
  background-color: lightblue;
}

<div class="header">header</div>
<div class="content">content</div>

有关参考，请参见Basic concepts of flexbox。

Answer 2

如果我是你，我将考虑以下代码。

html,
body {
  height: 100%;
}

.content {
  display: flex;
  flex-grow: 1;
  background: khaki;
  height: 100%;
}

.wraper {
  height: 100vh;
  background: pink;
}

<html>

<body>
  <div class="wraper">
    <div class="header">header</div>
    <div class="content">content</div>
  </div>
</body>

</html>

使div使用屏幕的所有剩余高度

2 个答案: