我有一个事件日历。日期显示在屏幕左侧。 当前显示具有全年 View ，因此它有 365 行天。 即使用户向右滚动，我也想让日期可见。 但当用户滚动到底部时，日期也必须滚动。 我想要做的就是使用 css position:fixed 但只有 left:0 但 top 不会是 0。
这是代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calendar</title>
<style>
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
body{
background: #fff;
color: #000000;
font-family: Arial,Sans;
font-size: 13px;
line-height: 19px;
padding: 0 0 0 70px;
text-align: left;
width:5000px;
}
.cal{
left: 0;
position: absolute;
top: 0;
width: 5000px;
}
.dayrow{ border-bottom: 1px solid #EFEFEF;
height: 19px;
}
.dayrow:hover{background:#000;opacity:0.2;}
.header{font-weight:bold;}
.date{
background: none repeat scroll 0 0 #EFEFEF;
font-weight: bold;
height: 100%;
padding: 0 5px 0 0;
text-align: right;
width: 90px;
}
.columnOK{height:19px;width: 149px; border-right: 1px solid #bbb;float:left;}
</style>
</head>
<body>
<div class="cal">
<div class="dayrow"><div class="date" style="float:left;">11 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">12 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">13 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">14 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">15 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">16 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">17 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">18 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">19 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">20 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">21 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">22 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">23 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">24 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">25 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">26 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">27 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">28 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">29 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">30 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">31 October</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 1 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 2 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 3 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 4 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 5 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 6 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 7 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 8 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 9 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">10 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">11 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">12 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">13 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">14 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">15 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">16 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">17 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">18 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">19 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">20 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">21 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">22 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">23 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">24 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">25 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">26 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">27 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">28 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">29 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">30 November</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 1 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 2 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 3 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 4 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 5 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 6 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 7 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 8 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;"> 9 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">10 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">11 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">12 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">13 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">14 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">15 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">16 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">17 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
<div class="dayrow"><div class="date" style="float:left;">18 December</div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div><div class="columnOK"></div></div>
</div>
</body>
</html>
最佳答案
一种粗略的解决方案，但一种解决方案..
<script type="text/javascript">
window.onscroll = function (){
left = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
var cal = document.getElementById("cal");
for(i = 0 ;i<cal.childNodes.length ; i++)
if(cal.childNodes[i].className == "dayrow")cal.childNodes[i].firstChild.style.left = left + "px";
}
</script>
在您的 html 中更改它 --
<div id="cal" class="cal">
这是一个快速修复..但是因为你显示了所有的日期我不推荐使用这个..如果你愿意改变布局，我可以给你一个更好的解决方案..
呈现有点糟糕，因为 JS 相当广泛——我不是说它是最好的，而是一个确实有效的解决方案..
DEMO
关于CSS 位置固定在左侧但不是顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9401860/