【发布时间】：2016-02-16 07:40:55
【问题描述】：
我模拟了一个响应式日历。此日历用于显示当地消防部门的班次。
See this JS fiddle for an example
正如您所看到的，当您更改小提琴的框架大小时，日历会重新调整大小，但会保持其“单元格”的相同纵横比。
我上面的解决方案只要放在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"><</div>
<div class="small-8 columns calMonth">March 2015</div>
<div class="small-2 columns calNext">></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
}
提前感谢您的帮助！
【问题讨论】：
-
给你。你可能想清理一下jsfiddle.net/vtwj4v2o/9
-
超级快速且完美。请将您对 css 所做的更改发布为答案，以便我为您接受。
标签： html css responsive-design zurb-foundation