如何相对于底部布局 HTML 元素？答案

【问题标题】：How to layout HTML elements relative to bottom?如何相对于底部布局 HTML 元素？
【发布时间】：2018-03-23 21:55:04
【问题描述】：

我正在尝试在 react 中布局 3 个元素（没有 jQuery 和引导程序）。看图：

本质上，应用程序有一个容器 div，它占用 Body 的 100% 高度，设置为窗口高度。它有三个子元素：

标题：相对于容器顶部定位
页脚：相对于容器底部定位；可能有可变高度
内容：相对于页脚顶部定位

让容器和页眉就位很容易，但页脚和内容是困难的部分。我的代码如下所示：

CSS：

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
}

#footer: {
  position: fixed,
  right: 0,
  bottom: 0,
  left: 0,
}

我正在尝试了解实现它的最佳方法。您能建议我应该如何编写 CSS 吗？

【问题讨论】：

什么是 reactjs 标签？
其中一些正在 react 中实现。我只是从中提取了样式，以使了解 HTML/CSS 但不了解 reactjs 的人变得简单。
@RahilParikh 你可以使用 jquery 来减去页眉和页脚的高度，剩下的可以提供给内容部分
@AnmolSandal 建议不要使用 jQuery 和 Bootstrap 进行 UI 更改，因为它会干扰 ReactJS。
您希望页眉和/或页脚随内容滚动还是被固定？

标签： html css reactjs

【解决方案1】：

HTML：

<body>
  <div class="container">
    <header>
    </header>
    <div class="content">
    </div>
    <footer>
    </footer>
  </div>
</body>

CSS：

body {
  margin: 0;
  padding: 0;
  background-color: white;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: black;
  display: flex;
  flex-direction: column;
}

header {
  flex: 0 0 120px;
  background-color: green;
}

.content {
  flex: 1 1;
  background-color: blue;
  overflow: hidden;
}

footer {
  flex: 0 0 10%;
  background-color: red;
}

Codepen：https://codepen.io/anon/pen/WZKwEb

说明：布局使用 CSS3 flexbox。所有元素都有不同的背景颜色，以提供比例和高度的视觉反馈。

顶级容器 div 是 flexbox 容器。它的高度和宽度分别设置为 100vh（100% 视口高度）和 100vw（100% 视口宽度）。

header 和 footer 设置为特定高度（header 以像素为单位，footer 以 % 为单位，为了演示两者），而 content div 设置为占用剩余空间，并相应地增长或缩小（@ 987654324@).

如果页眉或页脚的内容超出了它们的特定高度，它们的高度将相应地调整，以内容 div 为代价。内容div的溢出设置为hidden，这意味着它的内容既不会溢出到页眉或页脚，也不会导致滚动条出现，而是会隐藏溢出的内容。

【讨论】：

【解决方案2】：

请检查更新的答案。希望对您有所帮助。请检查答案。在这里，我首先计算了页眉和页脚的高度以及窗口高度，并通过从中减去页眉和页脚的高度来为内容提供剩余高度。 Jindy 查看 jquery 代码。希望对你有帮助。

var WindowsSize=function(){
    var h=$(window).height(),
        w=$(window).width();
        headerHeight = $('.header').height();
        footerHeight = $('.footer').height();
        h=h-headerHeight-footerHeight;
    $(".content").height(h);
};
$(document).ready(function(){WindowsSize();}); 
$(window).resize(function(){WindowsSize();});

body {
  margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

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

</div>

【讨论】：

【解决方案3】：

这就是你可以用简单的 css vey 更少的代码来做的事情

https://codepen.io/bhupinderkumarbl/pen/LzBGZN

.content {
  height: 400px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  justify-content:space-between
}
h1, h2 {
  margin: 0;
}

<div class="content">
  <h1>heading 1</h1>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

【讨论】：

【解决方案4】：

下面的超级干净和简单的代码也非常灵活。

body {
  margin:0;
}
.container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
section, header, footer{
  background:#EEE;
  padding:20px;
  border:5px solid #FFF;
  text-align:center;
}
section{
  flex:1;
}

<div class="container">
  <header>Header</header>
  <section>Content</section>
  <footer>Footer</footer>
</div>

【讨论】：