如何从边界到边界填充整个日历 header？

Question

我无法填充所有header，例如，用红色填充，因为它只填充在文本区域，我需要从左上角灰色区域填充到天开始的地方. 这里是 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.

删除 #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;
  }

<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>

2.

向 -15px 的 #calendar-month-year 添加负边距，使其与父级的填充重叠。

#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;
  margin: -15px;
}
#calendar-container>div {
  padding: 0;
  margin-bottom: 10px;
}
#calendar-dates>table>tr>td {
  font-size: 14px;
  padding: 10px;
}

<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>

Answer 2

假设您正试图将红色区域的宽度设为 100%。为此，请将 #calendar-container 上的左右填充限制为 padding: 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;
}

如何从边界到边界填充整个日历 header？

How to fill entire calendar header from border to border?

html

css

background

header

fill

1.

2.