2011-04-02 33 views
2

我想將FullCalendar實現爲2列布局(左列)。右邊欄是一個浮動的div,它會在日曆控件和日曆本身之間造成間隙。日曆頂部的無法解釋的空白?

我該如何解決這個問題?

這裏的HTML:

<div id="container"> 
    <div id="header"> 
     <h1>Header</h1> 
    <!-- end #header --></div> 

    <div id="sidebar1"> 
     <h3>sidebar1 Content</h3> 
     <p>The background color on this div will only show for the length of the content. If  you'd like a dividing line instead, place a border on the right side of the #mainContent div if the #mainContent div will always contain more content than the #sidebar1 div. </p> 
     <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> 
    <!-- end #sidebar1 --></div> 

    <div id="mainContent"> 
     <div id="calendar"></div> 
    <!-- end #mainContent --></div> 

    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" /> 
    <div id="footer"> 
     <p>Footer</p> 
    <!-- end #footer --></div> 
<!-- end #container --></div> 

這裏是CSS:

#mainContent { 
    padding: 0px; 
    border: 1px solid #0F3; 
    margin-top: 0; 
    margin-right: 30%; 
    margin-bottom: 0; 
    margin-left: 0; 
} 

#sidebar1 h3 ,#sidebar1 p { 
    margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */ 
    margin-right: 10px; 
} 

回答

2

在CSS看看:

.fc-content { 
    clear: both; 
} 

那是什麼導致了它。刪除它似乎沒有破壞任何東西,但我沒有在IE中測試過它。

+0

Followint這個答案,加入CSS規則,解決了這一問題。未在IE .fc-content {清除:無!重要; } – spuas 2014-05-28 15:57:48

0

嘗試增加此類似,@spuas回答

.fc-clear { 
    clear: none !important; 
}