时间戳

首页 > 解决方案 > 定位日历

html - 定位日历

问题描述

您如何定位日历以像演示一样浮动在页面中？

提供的示例将日历固定在左上角.. 已修复。编码

<style>
  html, body {
    overflow: hidden; /* don't do scrollbars */
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar-container {
    width: 700px;
      position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .fc-header-toolbar {
    /*
    the calendar will be butting up against the edges,
    but let's scoot in the header's buttons
    */
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
  }
    .td_Info{
         width: 300px; 
    }
    .td_calendar{
         width: 700px; 
    }
</style>

</head>
<body>
<div>
<h1>My Page</h1>
</div><br/>
<table><tr>
        <td class="td_Info">INFO<br>
          more<br> 
          more <br>
          more <br>
          more<br></td>
        <td class="td_cal"><div style="max-width: 500px;">
          <div id='calendar-container'>
            <div id='calendar'></div>
          </div>
        </td></tr>
       </table>
    </div>
  </body>
</html>

渲染 日历

我知道这是因为样式上的固定位置..但是当我取下它并放置类似相对的东西时..日历不再正确呈现..

日历渲染 2

标签： htmlcssfullcalendar

解决方案

推荐阅读