CSS，容器高度比预期的太小，是否有修复？

问题描述：

我在一个教育页面上工作，我遇到了一个问题，我无法真正弄清楚如何解决。正如你在这里看到的那样：jsFiddle黄色框比左边的蓝色边框大得多，我需要蓝色边框用黄色框（邮件示例）一路向下，就像左边的虚线橙色边框一样。有什么办法可以用CSS和HTML来解决吗？CSS，容器高度比预期的太小，是否有修复？

请检查您的小提琴链接。 – zakangelle 2013-03-12 21:07:33

并在此处发布您的代码。 – j08691 2013-03-12 21:08:34

是正确的链接：http://jsfiddle.net/aYDwN/ – 2013-03-12 21:08:54

答

有吨的错误在你的代码。

您不能给予超过1个元素相同的ID：#col-2。

你给了一个div类.example，然后你给它的孩子段落相同的类，所以你给每个段落一个高度，所以父母拿到了这个高度，这就是为什么边界不伸展，因为这元素只有32px height。

所以......

.example { 
    /* background-image: url(../images/note_bg-line.jpg) repeat-y; */ 
    background-color: yellow; 
}

然后给段落具有32px height另一个类。

您指定这样的段落...

<p class="p example"></p>

删除此p example，只是使用在CSS：

.example p { 
     padding-top: 19px; 
    padding-left: 70px; 
    margin: -19px 0 0 0; 
     height:32px; 
}

您将得到desired effect...

答

使用示例容器类的高度玩伎俩。正如你希望它像橙色边框一样向下，height: 295px;的作品。 http://jsfiddle.net/xbcBz/1/

.example-container { 
    border-left: dotted 5px #2491F5; 
    padding:5px; 
    height: 295px; 
}

CSS，容器高度比预期的太小，是否有修复？

相关推荐