html——具有动态大小的顶部和底部属性

Question

我有一个 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 上方时，下边框会以您移动光标的一半左右的速度向上或向下移动——我想让面板底部与窗口底部保持恒定距离.

谢谢!

Answer 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