Question

我有一个div我试图给出特定的属性。我的页面有一个页眉和一个页脚，我希望主体由一个15px填充的面板组成，但底部填充总是变量。如果窗户太高，我的底部填充比顶部和侧面填充大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。请注意，当您将分隔符拖动到“结果”上方时，下边框会以您移动光标的速度的一半左右向上或向下移动 - 我想要这样做，以使面板底部与窗口底部保持恒定距离

谢谢！

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

具有动态大小的html-top和bottom属性

1 个答案: