我无法将元素垂直对齐到底部

Question

我正在尝试将我的fullcalendar.io事件显示在当天的底部，而不是在中间。我一直在尝试将不同的元素修改为vertical-align：“bottom”但似乎没有任何效果。这是指向fiddle的链接，该链接具有不同的css重载调用，用于将日历事件的垂直对齐设置为底部。目前事件发生在当天的中间，我希望它在单元格的底部。

$(document).ready(function() {

    // page is now ready, initialize the calendar...
    var eventsArray = [
            {
                title: 'Test1',
                start: new Date()
            },
            {
                title: 'Test2',
                start: new Date(2015, 4, 21)
            }
        ];

    $('#calendar').fullCalendar({
        // put your options and callbacks here
        header: {
            left: 'prev,next', //today',
            center: 'title',
            right: ''
        },
        defaultView: 'month',
        editable: true,
        allDaySlot: false,
        selectable: true,
        events: eventsArray
    })

});

//all the different things I've tried!!!!!!!
tbody {
    vertical-align: bottom;
}

tr td.fc-event-container {
    vertical-align: bottom;
}
td.fc-event-container {
    vertical-align: bottom;
}

td {
    vertical-align: bottom;
}

.fc-event-container {
    vertical-align: bottom;
}

tr {
    vertical-align: bottom;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>


<div style="border:solid 2px red;">
    <div id='calendar'></div>
</div>

我检查了Chrome浏览器窗口中的元素，我不确定哪个元素需要垂直对齐集。 这是Chrome中元素的图片。

Answer 1

包含该表的元素由其内容保持打开状态。您的垂直对齐方式正在运行，但该元素仅与其内容一样高。只需确保容器100％高：

.fc-content-skeleton,
.fc-content-skeleton table {height:100%;}

https://jsfiddle.net/4v65ggos/9/

Answer 2

两个问题：

1）含有元素不是＆＃34;细胞的100％＆＃34;高度（由第二个＆＃34;骨架＆＃34;表设置）

2）vertical-align被覆盖，因此我们需要提高特异性

这里是将高度设置为100％的CSS：

.fc-row .fc-content-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fc-content-skeleton table {
    height: 100%
}

最后，提高特异性：

.fc-content-skeleton .fc-event-container {
    vertical-align: bottom;
}

（或者，我们可以添加!important）

更新的小提琴：https://jsfiddle.net/4v65ggos/13/

Answer 3

您可以为表格元素设置固定高度。

   .fc-row  table{ 
      height:72px;
    }

如果您正在处理的网站响应，这会很有效。

确保对两个元素，表格及其容器应用高度：100％。

.fc-content-skeleton,.fc-content-skeleton table{
   height:100%;
}

Answer 4

您需要为fc-content-skeleton设置与fc-bg相同的高度（您可以将其设置为64px作为后台尝试）。 fc-content-skeleton（或height: 100%）内的表格相同。

然后fc-event-container可以使用您想要使用的vertical-align: bottom。

要使用此属性，父级必须具有非自动高度。