响应式 css 日历格式在页面不是全宽时中断

Question

我模拟了一个响应式日历。此日历用于显示当地消防部门的班次。 See this JS fiddle for an example
正如您所看到的，当您更改 fiddle.

的框架大小时，日历会调整大小但保持其 "cells" 的相同纵横比

我上面的解决方案只要放在 html 页面的全宽容器内就可以使用。

问题

只要我将日历放在 html div 中，它不是页面的完整宽度，日历就不会正确显示。单元格不是正方形，并且重叠的项目（x、O 和正方形）未正确定位。这是因为我将每个单元格的高度基于 viewport 宽度或 vw。请参阅 css “.pCal ul li” 和属性 height:14vw;

See this fiddle for an example of the problem.

下图捕捉到了问题（可以看到左右两列，中间显示的日历不正确）

问题：

有人可以帮我更正我的 css 以便即使在不是页面全宽的 html 元素内也能正确显示日历。
我真的更希望有一个仅 css 的解决方案，但如果需要，我愿意接受 javascript。

附加信息

为了完整起见，我需要添加以下详细信息。此解决方案使用 FOUNDATION 5.5 前端框架。

这是我的 HTML（如果 fiddle 没有显示）：

<div class="row">
    <div class="small-12 medium-2 columns" style="background:lightGrey;height:150px;">Left Column</div>
    <div class="small-12 medium-8 columns">
        <div class="row">
            <div class="small-2 columns calPrev">&lt;</div>
            <div class="small-8 columns calMonth">March 2015</div>
            <div class="small-2 columns calNext">&gt;</div>
        </div>
        <div class="row calRow">
            <div class="small-12 columns pCal">
                <ul class="small-block-grid-7">
                    <li class="calHead">
                        <span>SUN</span>

                    </li>
                    <li class="calHead">
                        <span>MON</span>

                    </li>
                    <li class="calHead">
                        <span>TEU</span>

                    </li>
                    <li class="calHead">
                        <span>WED</span>

                    </li>
                    <li class="calHead">
                        <span>THU</span>

                    </li>
                    <li class="calHead">
                        <span>FRI</span>

                    </li>
                    <li class="calHead">
                        <span>SAT</span>

                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-29.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftGr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-30.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftGr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-1.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftBl shift2" />
                            <dt class="shiftRd shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-2.svg">
                        </div>
                        <dl class="calDayOverlay">
                            <dt class="calLayer2 calX">
                                <img src="http://www.krisis.ca/Portals/0/development/effu/cal-special-X.svg">
                            </dt>
                            <dt class="calLayer3 calCircle">
                                <img src="http://www.krisis.ca/Portals/0/development/effu/cal-special-O.svg">
                            </dt>
                            <dt class="calLayer4 calSquare">
                                <img src="http://www.krisis.ca/Portals/0/development/effu/cal-special-SQR.svg">
                            </dt>
                        </dl>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftBl shift2" />
                            <dt class="shiftRd shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-3.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftOr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-4.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftOr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-5.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-6.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-7.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftBl shift3" />
                            <dt class="shiftWh shift3" />
                            <dt class="shiftRd shift3" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-8.svg">
                        </div>
                        <dl class="calDayOverlay">
                            <dt class="calLayer2 calX">
                                <img src="http://www.krisis.ca/Portals/0/development/effu/cal-special-X.svg">
                            </dt>
                        </dl>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftBl shift2" />
                            <dt class="shiftRd shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-9.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-10.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-11.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftGr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-12.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftGr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-13.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftBl shift2" />
                            <dt class="shiftRd shift2" />
                        </dl>
                        <div class="calDay">
                            <img class="calToday" src="http://www.krisis.ca/Portals/0/development/effu/cal-day-14.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftBl shift2" />
                            <dt class="shiftRd shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-15.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftOr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-16.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftOr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-17.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-18.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-19.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-20.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-21.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftGr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-22.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftGr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-23.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftBl shift2" />
                            <dt class="shiftRd shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-24.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftBl shift2" />
                            <dt class="shiftRd shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-25.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftOr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-26.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftOr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-27.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-28.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-29.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftOr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-30.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-31.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftGr shift2" />
                            <dt class="shiftBl shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-1.svg">
                        </div>
                    </li>
                    <li>
                        <dl class="calDayParts">
                            <dt class="shiftRd shift2" />
                            <dt class="shiftGr shift2" />
                        </dl>
                        <div class="calDay">
                            <img src="http://www.krisis.ca/Portals/0/development/effu/cal-day-2.svg">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="small-12 medium-2 columns" style="background:lightGrey;height:150px;">Right Column</div>
</div>

这是我的 CSS：（您需要包括对基础 5 css 的引用 - 您可以使用 this CDN）

.calRow {
    max-width:100%;
}
.calMonth, .calPrev, .calNext {
    text-transform:uppercase;
    font-weight:bold;
    color:gray;
    font-size:2em;
    margin:15px 0;
}
.calMonth {
    text-align:center;
}
.calPrev {
    text-align:left;
}
.calNext {
    text-align:right;
}
.pCal ul li {
    text-align:center;
    height:14vw;
    padding:0;
    border-left:solid 1px gray;
    border-top:solid 1px gray;
}
.pCal ul li:after {
    content:'';
    display: block;
    margin-top: 100%;
}
.pCal ul li dl {
    position:relative;
    padding:0;
    margin:0;
    top:0;
    height:100%;
}

.pCal ul li dl dt {
    padding:0;
    margin:0;
}
.pCal ul li.calHead {
    font-size:1.2em;
    border:none;
    color:gray;
    height:25px;
    margin-bottom:15px;
}
.calToday {
    border-bottom:0.5em solid lightGrey;
}

.calDay {
    position:relative;
    padding:15%;
    margin:0;
    top:-100%;
}

.calLayer2, .calLayer3, .calLayer4 {
    position:relative;
    padding:0;
}
.calLayer2 {
    top:-200%;
}
.calLayer3 {
    top:-300%;
}
.calLayer4 {
    top:-400%;
}

/*  SHIFT HEIGHT / SIZE STYLES  */

.shift2 {
    height:50%
}
.shift3 {
    height:33.33%
}
.shift4 {
    height:25%
}


/* OVERLAY STYLES  */
.calX img{
    width:100%;
    padding-top:2%;
}
.calCircle img{
    width:100%;
    padding:9% 7%;
}
.calSquare img {
    width:100%;
    padding:7%;
}

/*  SHIFT COLOR STYLES  */

.shiftYw {
    background:yellow;
}
.shiftOr {
    background:orange
}
.shiftBl {
    background:blue
}
.shiftRd {
    background:red
}
.shiftGr {
    background:green
}
.shiftWt {
    background:white
}
.shiftBk {
    background:lightGray
}

在此先感谢您的帮助！

Answer 1

所以基本的改变是跳过 li 元素的高度，而是使用百分比填充。通过这样做，盒子将保持方形。剩下的只是内部元素的一些绝对定位。

响应式 css 日历格式在页面不是全宽时中断

responsive css calendar format breaks when not full width of page

html

css

responsive-design

zurb-foundation

问题

问题：

附加信息