html - 如何将按钮放置在带有扩展内容的窗口底部

Question

我会尽力解释这一点。

我希望提交按钮始终位于页面底部。现在我知道这可以通过 position: absolute, bottom 等来实现，但有一个问题。

如果内容高度小于包装 div 高度，我希望按钮显示在窗口底部是否有意义？

如果内容长于包装 div 高度，则显示在内容的底部，而不是窗口。

这是一个JSFIDDLE展示第二个条件工作的例子 - 我需要第一个条件的帮助

.container {
  height: 400px;
  width: 400px;
  background: red;
  overflow: scroll;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  height: 100px;
  background: blue;
  margin-bottom: 10px;
  color: white;
}

button {
  display: block;
  width: 100%;
  background: black;
  height: 40px;
  color: white;
}

Answer 1

我相信这对您来说是最简单的解决方案:https://jsfiddle.net/7wsrv6z7/

需要说明的是，my .wrapper 应该放在你的 .container 中

编辑

与您的示例合并:https://jsfiddle.net/Lu3am0Lo/5/

* {
  box-sizing: border-box;
}

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

.wrapper {
  padding-bottom:100px;
  min-height:100%;
  background:#fff;
  position:relative;
}

p {
  background:#eee;
}

.wrapper button {
  position:absolute;
  bottom:20px;
  right:20px;
  border-radius:40px;
  background:purple;
  color:#fff;
  padding:10px;
  border:none;
  transition:.2s;
}

.wrapper button:hover {
  padding: 10px 20px;
}

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde facilis deserunt voluptates. Ratione quis, a quod, non impedit, earum minima nam asperiores ut sequi rem. Ullam error quia numquam eveniet dicta earum soluta dolor esse ea vel! Ipsum, sapiente, totam.</p>

  <p>lorem300</p>

  <button>SEND</button>
</div>