I can't verticaly align an element to bottom

问题

I'm trying to get my fullcalendar.io event to show up at the bottom of the day instead of in the middle. I've been trying to modify different elements to vertical-align: "bottom" but nothing seems to work. Here is a link to my fiddle that has different css overloaded calls to set the vertical-alignment to bottom for a calendar event. Currently the event is placed in the middle of the day, I want it at the bottom of the cell.

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

I inspected the elements in the explorer window in Chrome and I'm not sure which element needs the vertical alignment set. Here is a pic of the elements in Chrome.

回答1:

The element which contains the table is held open by its content. Your vertical alignment is working but the element is only as tall as its content. Simply make sure the container is 100% high:

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

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

回答2:

Two issues:

1) the containing element isn't 100% of the "cell" height (which is set by a second "skeleton" table)

2) the vertical-align is overriden, so we'll need to increase specificity

Here's the CSS that will set the height to 100%:

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

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

And finally, to increase specificity:

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

(Or, we could add !important)

An updated fiddle: https://jsfiddle.net/4v65ggos/13/

回答3:

You can set a fixed height to the table element.

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

This though won't work well if the site you are working on it's responsive.

Make sure you apply height:100% to both elements, the table and its container.

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

回答4:

You need to set the same height for the fc-content-skeleton as the fc-bg (you can set it to 64px as the background one just to try). The same for the table inside the fc-content-skeleton (or height: 100%).

Then the fc-event-container can use vertical-align: bottom you wanted to use.

In order to use this property, the parent must have a non-automatic height.

来源：https://stackoverflow.com/questions/29462217/i-cant-verticaly-align-an-element-to-bottom

标签

javascript

html

css

css3

fullcalendar