如何从边框到边框填充整个日历标题？

Question

我无法用红色填充所有标题，因为它只填充文本区域，我需要从左上角灰色区域填充到天数开始。 这是html：

  <div id="calendar-container">
     <div id="calendar-header">
       <span id="calendar-month-year"></span>
       <div id="calendar-dates"></div>
     </div>
  </div>

和css：

  #calendar-container{
  margin-left: 50px;
  margin-top: -50px;
  padding: 15px;
  width: 280px;
  height: 300px;
  text-align: center;
  font-size: 19px;
  color: #e4e4e5;
  font-family: Calibri;
  background: #323439;
}
#calendar-header{
  background-color: red;
  height: 30px;
}
#calendar-container>div{
  padding: 0;

  margin-bottom: 10px;
}
#calendar-dates>table>tr>td{
  font-size: 14px;
  padding: 10px;
}

现在我的结果：

Answer 1

您有两种选择：

1

从<div class="menu"> <a href="http://example.org" id="0DE2162E-155D-6942-02BED53F1B281FE2">Example</a> <a class="fc-day-grid-event fc-event fc-start fc-end fc-draggable" href="load_page.cfm?method=get-page-content&amp;page=12" data-toggle="modal" id="0DE2162E-155D-6942-02BED53F1B281FE2"><div class="fc-content"><span class="fc-time">8a</span> <span class="fc-title">My Birthday</span></div></a></div> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ theme: true, header: { left: 'prev,next today', right: 'month,agendaWeek,agendaDay' }, editable: true, eventLimit: true, events: [{ "id": "0DE2162E-155D-6942-02BED53F1B281FE2", "url": "load_page.cfm?method=get-page-content&page=10", "title": "test", "description": "<p><span style=\"color:rgb(0, 0, 0); font-family:arial,helvetica,sans; font-size:11px; line-height:14px; text-align:justify\">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</span></p>", "start": "2015-05-19T08:00", "end": "2015-05-19T08:59", "allday": false },{ "id": "0A2C0875-155D-6942-02D0F17291318096", "url": "load_page.cfm?method=get-page-content&page=12", "title": "My Birthday", "description": ",<p>Happy Birthday</p>", "start": "2015-05-13T08:00", "end": "2015-05-13T08:59", "allday": false }], eventClick: function(event, jsEvent, view) { $('#modalTitle').html(event.title); $('#modalBody').html(event.description); $('#eventUrl').attr('href',event.url); $('#fullCalModal').modal(); return false; }, loading: function(bool) { if (bool) { $('#loading').show(); }else{ $('#loading').hide(); } } }); }); jQuery( 'div.menu a' ) .click( function(event, jsEvent, view) { $('#modalTitle').html(event.title); $('#modalBody').html(event.description); $('#eventUrl').attr('href',event.url); $('#fullCalModal').modal(); return false; }); });//]]> </script> <div class="menu"> <a href="http://example.org" id="0DE2162E-155D-6942-02BED53F1B281FE2">Example</a> <a class="fc-day-grid-event fc-event fc-start fc-end fc-draggable" href="load_page.cfm?method=get-page-content&amp;page=12" data-toggle="modal" id="0DE2162E-155D-6942-02BED53F1B281FE2"><div class="fc-content"><span class="fc-time">8a</span> <span class="fc-title">My Birthday</span></div></a></div> <div id="fullCalModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">x</span> <span class="sr-only">close</span></button> <h4 id="modalTitle" class="modal-title"></h4> </div> <div id="modalBody" class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button> </div> </div> </div> </div> <div id='calendar'></div> 移除填充，并将其添加到#calendar-container。

#calendar-dates

  #calendar-container {
    margin-left: 50px;
    /*margin-top: -50px;*/
    /*padding: 15px;  */
    width: 280px;
    height: 300px;
    text-align: center;
    font-size: 19px;
    color: #e4e4e5;
    font-family: Calibri;
    background: #323439;
  }
  #calendar-header {
    background-color: red;
    height: 30px;
  }
  #calendar-container>div {
    padding: 0;
    margin-bottom: 10px;
  }
  #calendar-dates {
    padding: 15px;
  }
  #calendar-dates>table>tr>td {
    font-size: 14px;
    padding: 10px;
  }

2

为<div id="calendar-container"> <div id="calendar-header"> <span id="calendar-month-year">May 2015</span> <div id="calendar-dates">dates dates dates dates dates dates dates</div> </div> </div>的{​​{1}}添加一个负余量，因此它与其父级的填充重叠。

#calendar-month-year

-15px

Answer 2

假设您尝试将红色区域设置为100％宽度。为此，请将＃calendar-container上的左右填充限制为填充：15px 0

这是你要找的吗？

Answer 3

#calendar-container的填充为15px。删除它。

Answer 4

您可以absolute使用#calendar-header位置。

将#calendar-container更新为：

 #calendar-container{
  ...
  padding:45px 15px 15px 15px; /*30px top for header height + 15px extra padding*/
   position: relative;
}

然后将这些样式添加到#calendar-header：

#calendar-header{
  ...
  height:30px;
  position:absolute;
  top:0;
}