Question

似乎被困在应该是一项微不足道的任务上。我有一个像这样的部分元素

<section id="about">
    <div class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-6">
                <h2 class="section-heading">Some Header</h2>
            </div>
        </div>
        <div class="row alignBottom">
            <div class="col-xs-5 col-xs-offset-1">
                <p>Some content</p>
            </div>
            <div class="col-xs-5 col-xs-offset-1">
                <p>Some more content</p>
            </div>
        </div>
    </div>
</section>

我所做的是通过执行

使此部分成为视口的高度

#about {
  background: #cccccc;
  min-height: 100vh;
}

现在在本节中我有两行。第一行应显示在顶部，所以我真的不需要这样做。我需要在该部分底部显示第二行。要做到这一点，我原本以为我需要首先给容器一个100％的高度，但这似乎不会改变它的高度。我可以100％获得容器的唯一方法是再次使用100vh，但看到它是该部分的孩子，为什么不能100％工作？

即使我100％使用100vh获得它，我似乎无法获得容器底部的行。我该怎么做呢？

我已设置示例JSFiddle

由于

Answer 1

您可以使用display：flex。根据我的理解，您希望其中一行显示在该部分的顶部，另一行显示在底部

Div要有100％的高度和宽度，身体也应该有100％的宽度和高度，而不是你可以设置100vh高度约为100Vh高度和容器上的100vh高度

这是片段

#about {
  background: #cccccc;
  height: 100vh;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}
.row {
  display: flex;
  border: 1px solid green;
}
.col {
  margin-left: 15px;
}

<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-xs-offset-6">
        <h2 class="section-heading">Some Header</h2>
      </div>
    </div>
    <div class="row alignBottom">
      <div class="col col-xs-5 col-xs-offset-1">
        <p>Some content</p>
      </div>
      <div class="col col-xs-5 col-xs-offset-1">
        <p>Some more content</p>
      </div>
    </div>
  </div>
</section>

希望这有帮助

Answer 2

您可以调整“alignBottom”行的位置，在文档就绪时设置正确的“margin-top”：

此行的位置为：截面的总高度减去行的高度。

摘录：

SELECT
    [GroupBy2].[A1] AS [C1]
    FROM ( SELECT
        COUNT(1) AS [A1]
        FROM ( SELECT
            [Extent1].[UserId] AS [K1],
            SUM([Extent2].[Points]) AS [A1]
            FROM  [dbo].[UserIqAnswers] AS [Extent1]
            INNER JOIN [dbo].[IqQuestions] AS [Extent2] ON ([Extent1].[IqQuestion_Id] = [Extent2].[Id]) AND ([Extent2].[CorrectAnswer] = [Extent1].[Answer])
            WHERE [Extent1].[UserId] <> @p__linq__0
            GROUP BY [Extent1].[UserId]
        )  AS [GroupBy1]
        WHERE ([GroupBy1].[A1] < @p__linq__1) OR (([GroupBy1].[A1] = @p__linq__2) AND ([GroupBy1].[K1] < @p__linq__3))
    )  AS [GroupBy2]

$('.alignBottom').css('margin-top', $('#about').height() - $('.alignBottom').height());

html, body {
  height:100%;
}

#about {
  background: #cccccc;
  min-height: 100vh;
}

显示容器底部的行

2 个答案: