CSS边框不延伸整个Div

看看下面的图片，你可以看到我在div的每一边都有一个边框，或者至少在div的右边。我想边界做的是扩展整个灰色的div，但是当我把height:100%;与边界它看起来就像它的div。检查我的CSS也下面，让我解释一下。 #Content是包含所有内容的大灰色div，如果我删除最小高度并使其为height:70%;边框扩展整个页面。看看下面的前后图片来获得一个想法。CSS边框不延伸整个Div

CSS：

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

前：

BEFORE

后： AFTER

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

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

有人可以请我解释一下，我怎样才能得到具有最小高度属性的“后状态图”的边界。这里是一个的jsfiddle周围的混乱中：Link

来源

2013-03-08 Moussa Harajli

是必须的PHP标签吗？ – Class 2013-03-08 02:06:42

不是真的不好把它摘下来...... – 2013-03-08 02:07:28

嗨是你想要照亮的''''内容'的边框 – jhunlio 2013-03-08 02:20:01

我猜了一点，但也许会导致你想要的效果来自：

#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需要一个绝对测量其高度（相对一个像汽车或100％不会这样做）。所以，我指定了min-height为#Files（20em，但您可以调整此设置），对于小内容（几行），边框会一直放到底部。对于更大的文本块，它仍然有效。

因为你浮动其他div的方式，#Files div无法知道兄弟元素的高度，所以它可以做的最好的是继承父级的高度，但在这种情况下，其他元素不要因为他们漂浮。

来源

2013-03-08 03:06:09

我想边界扩展整个灰色的div。 – 2013-03-08 03:09:18

好吧，让我再试一次... – 2013-03-08 03:11:07

但为什么如果我使高度最小高度它的作品，但不是其他方式？ – 2013-03-08 23:38:54

CSS边框不延伸整个Div

回答

相关问题