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

Question

我在一個教育頁面上工作，我遇到了一個問題，我無法真正弄清楚如何解決。正如你在這裏看到的那樣：jsFiddle黃色框比左邊的藍色邊框大得多，我需要藍色邊框用黃色框（郵件示例）一路向下，就像左邊的虛線橙色邊框一樣。有什麼辦法可以用CSS和HTML來解決嗎？

Answer 1

有噸的錯誤在你的代碼。

您不能給予超過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...

Answer 2

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

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