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%; }

有人可以向我解释一下如何在状态图片之后获得边界＆＃34;具有最小高度属性。这里有一个混乱的地方：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/

希望这有帮助！

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

关于min-height： 为了让边框能够正常工作，#Files div需要对其高度进行绝对测量（一个像auto这样的相对值，或者100％不会这样做）。所以，我为min-height指定了#Files（20em，但你可以调整它），对于小内容（几行），边框一直到底部。对于较大的文本块，它仍然有效。

由于你浮动其他div的方式，#Files div无法知道兄弟元素的高度，它能做的最好就是从父节点继承高度，但在这种情况下，其他因素没有因素，因为它们是浮动的。