我表中的绝对位置 div 超过了表和包装 div答案

【问题标题】：The Absolute Position Div inside my table exceeds the table and wrapping div我表中的绝对位置 div 超过了表和包装 div
【发布时间】：2016-10-27 16:04:01
【问题描述】：

我有一个我正在使用的日历，它延伸到容器之外。我尝试将溢出更改为隐藏，在容器外添加一个包装器 div，切换到相对定位等等，但它仍然不会留在表的参数内。这是我的小提琴的链接...您会注意到像 3 天会议这样的项目不会在单元格内结束，而是会延伸过去。

这里是 css 部分，html 部分又长又笨拙，因为它呈现日历。

<style type="text/css">
    .days.theWeekend {
        background: #333;
    }
    .main {
        width: 1863px;    }
    .month {
        background-color: black;
        font: bold 12px verdana;
        padding: 5px;
        color: white;
    }
    .daysofweek {
        background-color: gray;
        font: bold 12px verdana;
        color: white;
        float: left;
        width: 49px;
        border-right: 1px solid #EEEEEE;
        text-align: center;
    }
    .days {
        font-size: 12px;
        font-family: verdana;
        color: black;
        background-color: #fff;
        float: left;
        width: 49px;
        border-right: 1px solid #EEEEEE;
        height: 100px;
        text-align: center;
        overflow: visible;
    }
    .days #today {
        font-weight: bold;
        color: red;
    }
    .eventBar {
        /* width: initial !important; */
        height: 18px;
        background-color: red;
        /*          margin: 10px 0 0 2px; */
        position: absolute;
        color: #fff;
        text-align: center;
    }

    .eventBar > a {   
        color: #fff;
    }

    .eventBarPurple {
        height: 18px;
        background-color: red;
        margin: 10px 0 0 2px;
        position: absolute;
        color: #fff;
        text-align: center;
    }

    .eventBarPurple > a {   
        color: #fff;
    }
    .eventBar.thisSiteOrigin {
        background: #0022ff;
    }

    span.monthNumber {
        display: block;
    }

    .ms-rte-embedcode.ms-rte-embedwp {
        width: 2000px;
    }

    table.main {
        width: 100%;
    }
</style>

https://jsfiddle.net/t0zj6e5w/

【问题讨论】：

标签： javascript html css html-table css-tables

【解决方案1】：

需要添加如下css：

table#calendar {
overflow: hidden;
position: absolute;
}

div#tablewrapper {
position: relative;
}

【讨论】：

【解决方案2】：

将.eventBar 的宽度设置为100% !important，将高度设置为自动。然后将positon:relative 设置为.days

.days {
    font-size: 12px;
    font-family: verdana;
    color: black;
    background-color: #fff;
    float: left;
    width: 49px;
    border-right: 1px solid #EEEEEE;
    height: 100px;
    text-align: center;
    position: relative;
    overflow: visible;
}
.eventBar {
    width: 100% !important;
    height: auto;
    padding: 5px 0;
    background-color: red;
    /* margin: 10px 0 0 2px; */
    position: absolute;
    color: #fff;
    text-align: center;
}

还要使列的宽度更长一些，这样文本就不会被截断。这是示例fiddle。希望这对你有帮助。

【讨论】：