0

看看下面的图片，你可以看到我在 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%; }

有人可以向我解释一下如何在具有最小高度属性的“状态后图片”中获得边框。这是一个 jsFiddle 乱七八糟的：链接

4

1 回答 1

2

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

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

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

于 2013-03-08T03:06:09.850 回答