自动填充底部？答案

【问题标题】：Auto Padding Bottom?自动填充底部？
【发布时间】：2019-12-25 03:54:21
【问题描述】：

我正在尝试以某种方式将我展示给你们的装载机装入容器中。问题是，如果我执行padding-bottom，加载器只会覆盖浏览器，并且它会显示为未调整大小的加载器（看起来一点也不专业）。

很想知道是否有人有任何很酷的方法可以解决这个问题。（你可以在底部找到我的代码）。

到目前为止，这是我的 CSS：

export const Container = styled.div`
  padding: 250px 50px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 0px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  margin: 25px;
  bottom: 10px;
`;

提前感谢您的帮助！

【问题讨论】：

有什么问题？底部的空间？
是的，这就是问题所在。 P.D：很高兴再次见到你！
所以你希望容器基本上总是填满整个屏幕？哈哈，又来了:)
只是为了填充它，但保留它的边距。你知道的，看看顶部的分离，把它也保留在底部，但是当浏览器刷新时总是感觉那个空间
所以position: absolute; bottom: 25px; left: 25px; right: 25px; top: 25px;?或者如果您使用的是 flex，那么只需 flex: 1 并在父组件上确保其全屏尺寸

标签： css reactjs typescript

【解决方案1】：

只需将容器更新为您指定的fill the parent size minus the 25px of margin。

export const Container = styled.div`
  padding: 250px 50px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 0px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
`;

或者如果you are using flex you could do

export const Container = styled.div`
  flex: 1;
  margin: 25px;
  padding: 250px 50px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 0px;
  background-color: rgb(255, 255, 255);
  border-radius: 8px;
`;

【讨论】：