html - 具有动态大小的顶部和底部属性答案

【问题标题】：html—top and bottom property with dynamic sizehtml - 具有动态大小的顶部和底部属性
【发布时间】：2015-03-03 03:59:59
【问题描述】：

我有一个要赋予特定属性的 div。我的页面有一个页眉和一个页脚，我希望正文由一个面板组成，周围有 15 像素的填充，但底部填充总是可变的。如果窗口太高，我最终会得到比顶部和侧面填充大 3-4 倍的底部填充，如果窗口太小，页脚会与面板底部重叠。我的 html 基本上是这样的：

<div class="container-fluid">
    <div class="row">
        <div id="content" class="col-sm-12">
            <div class="panel panel-default">
                Title
            </div>
            <div class="panel-body">
                Content
            </div>
        </div>
    </div>
</div>

我尝试为#content 赋予以下样式：

position: fixed;
top: 15px;
bottom: 15px

希望我可以得到一个恒定的边框，但是当我同时拥有顶部和底部属性时，顶部只是覆盖底部，我仍然在底部有可变填充。有什么想法吗？

如需进一步说明，请参阅 jsfiddle here。请注意，当您将分隔线拖动到 Result 上方时，下边框会以大约一半的移动光标速度向上或向下移动 - 我想让面板底部与窗口底部保持恒定距离.

谢谢！

【问题讨论】：

你能用小提琴重现这个吗？但听起来它可能是使用固定位置的问题。
您可以添加您的 html 和 css，以便我们可以您尝试过的内容吗？使用给定的代码和解释很难确定您的问题。
我之前没用过jsfiddle，所以不太清楚如何加载合适的资源，不过我会贴出上面html的精简版。
所以我完全没有通过不弄清楚如何将引导程序导入 jsfiddle 来帮助自己。在上面添加了一个链接来演示我遇到的问题。谢谢！

标签： html css twitter-bootstrap user-interface user-experience

【解决方案1】：

最简单的方法是引入一个包装器来避免踩踏 Bootstrap 样式。

<div class="container-fluid">
  <div class="my-wrapper">
    <div class="row">
      <div id="content" class="col-sm-12">
        <div class="panel panel-default">
          Title
        </div>
        <div class="panel-body">
          Content
        </div>
      </div>
    </div>
  </div>
</div>

还有：

.my-wrapper{padding:15px;}

JSFiddle

【讨论】：

不幸的是，这对我没有任何影响。无论浏览器窗口有多大，我都需要 15px 的填充，因为我需要面板的顶部和底部与浏览器窗口的顶部和底部保持恒定的距离。
您应该在代码中添加一个 JSFiddle，以便我们更好地理解问题。