Question

在$（document）.ready中，我用一个数据库查询结果填充网格。在前面我不知道有多少记录。所以我不知道网格的高度。

我把结果放在我的＆＃34; Content div＆＃34;中。因为dom在我的网格之前就已经准备好了，所以我的content-div的大小并没有达到网格的高度。

有没有办法调整我的内容div的大小，以便网格适合它？

这是我现在的HTML：

＆＃13;

<body>
  <div id="container">
    <!-- header -->
    <header id="header">
      <h1 id="title">This is a test</h1>
    </header>
    <!-- Navigation -->
    <nav id="menu" class="clearfix">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <!-- Main Content area -->
    <section id="content">
      <h2>This is my content</h2>
      <div class="grid-container">
        <table id="hoursgrid"></table>
        <div id="pager"></div>
      </div>
      <!-- Main content -->
    </section>
    <!-- Sidebar -->
    <aside id="sidebar">
      <h3>This is the Sidebar</h3>
      <!-- Sidebar content -->
    </aside>
    <!-- Footer -->
    <footer id="footer" class="clearfix">
      Copyright
    </footer>
  </div>
</body>

＆＃13;

我的.css是：

#container{
margin: 0 auto; 
max-width: 100%;
}

header {
width: 94%;
padding-right: 3%;
padding-left: 3%;
background-color: rgb(49, 67, 88);
}
header #title {
font-size: 50px;
color: #fff;
}

nav {
width: 97%;
background-color: #E64A19;
padding: 0 1.5% 0 1.5%;
}
nav ul li {
display: inline-block;
padding: 15px 1.5% 15px 1.5% ;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
font-size: 1.2em;
}
nav ul li a:hover {
color: #000000;
text-decoration: none;
}

#content {
float: right;
padding: 3%;
width: 73%;
}

aside {
float: right;
padding: 3%;
width: 15%;
background-color: #eee;
}

footer{
width: 94%;
padding: 3%;
background-color: #FF5722;
border-top: 5px solid #E64A19;
color: #fff;
text-align: center;
}

谢谢，迈克

在（jquery）document.ready之后调整div

0 个答案: