CSS边框不扩展整个div

Question

看看下面的图片，你可以看到我在 div 的每一侧或至少在 div 的右侧都有一个边框。我想要边框做的是扩展整个灰色 div，但是当我将 height:100%; 放入带有边框的 div 时，它会按原样显示。在下面检查我的css，让我解释一下。 #Content 是包含所有内容的灰色大 div，如果我删除 min-height 并使其成为 height:70%; 边框会扩展整个页面。看看下面的前后图片来了解一下。

CSS：

#Content {
padding:0px;
min-height:70%;
}

之前：

之后：

已更改#Content { padding:0px; min-height:70%; }

致#Content { padding:0px; height:70%; }

有人可以向我解释如何使用 min-height 属性获得“状态后图片”中的边框。这是一个 jsFiddle 乱七八糟：Link

Answer 1

我猜了一下，但也许你想要的效果可能来自：

#Files {
    border-left: 2px solid red;
    border-right: 2px solid red;
    min-height: 20em;
    padding: 0 10px;   
}

为了清楚起见，我将边框设置为红色和宽，但可以更改。

要将边框一直延伸到<div id="Content"> 的末尾，您需要 修改如下样式：

#Content {
    width:100%;
    min-width:965px;
    min-height:50%;
    background-color:#FAFAFA;
    border-bottom:1px solid #E5E5E5;
    padding-top:50px;
    padding-bottom: 0px;
    font-weight:normal;
    color:rgba(0, 0, 0, .8);
}

请注意，您需要将底部填充设置为零。如果你想强制一个空格并保留边框，你需要一个固定高度的额外元素：

<p style="height: 50px; margin: 0;"><!-- spacing hack --></p>

这是一种快速而肮脏的方式，无需修改布局的其余部分。

注意你原来的样式表，我认为#Content 规则出现在几个地方（你原来的小提琴CSS面板中的第4行和第103行）。

我的小提琴是：http://jsfiddle.net/audetwebdesign/TuRUk/1/

希望这会有所帮助！

注意：我添加了一些额外的填充，但这是可选的。我不喜欢坐在边框上的文字......

关于最小高度： 要使边框按您的意愿工作，#Files div 需要对其高度进行绝对测量（相对的，如 auto 或 100% 不会这样做）。所以，我为#Files（20em，但你可以调整它）指定一个min-height，对于小内容（几行），边框一直到底部。对于较大的文本块，它仍然有效。

由于您浮动其他 div 的方式，#Files div 无法知道兄弟元素的高度，它可以做的最好的事情是从其父元素继承高度，但在这种情况下，另一个元素不考虑，因为它们是浮动的。