Question

这是我的页面：

当表列表很长时，它不会在表中扩展。需要建议这里有什么问题：）

<table style='width:300px'>
<tr>
  <th>Firstname</th>
  <th>Lastname</th>     
  <th>Points</th>
  <th>Points2</th>
  <th>Points3</th>
  <th>Points4</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>        
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>      
  <td>94</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>

</table>

Answer 1

您的#main有一个height: 700px。也许你添加它来使侧边栏的高度达到700px，但这不是正确的方法。

Answer 2

您将#main div设置为特定像素高度（700PX），而不是让它展开以包含该表。

Answer 3

从#main

中删除特定高度

http://jsfiddle.net/Gq66n/3/

#main {
    margin: 0;
    padding: 0;
    float: left;    
    width: 100%;
    clear: both;
    background-color: #39F;
    position: relative;
}

#sidebar {
    float: left;
    height: 100%;
    width: 150px;
    background-color: #333333;
    position:absolute;
    top:0;
    bottom:0

}
table{margin-left:150px}

Answer 4

这是一个解决方案：http://jsfiddle.net/Gq66n/9/

    body {
    margin: 0;
}
html, body { 
    height:100% 
}

#header {
    text-align: left;
    margin: 0 auto;
    height: 10px;
    background: #cc6600;
}
#header h1 {
    margin: 0;
    padding: 1em;
}
#mainOutr{  display: table; width: 100%;}
#main {
  margin: 0;
  padding: 0;
  width: 100%;
  clear: both;
  height:100%; 
  display: table-row;
}
.tableHldr
{width: 80%;   background-color: #39F;   display: table-cell;}
#sidebar {
  height: 100%;
  min-height: 100%;
  width: 20%;
  background-color: #333333;
  display: table-cell;


}

#sidebar ul {
    padding: 0;
    margin: 0;
    margin-left: 25px;
}


#sidebar ul {
    margin: auto;
    padding: 0;
}

#sidebar ul li a {
    text-decoration: none;
    color: #ff9999;
}

#sidebar ul li a:hover {
    color: #c3c3c3;
}

#footer {
    clear: left;
    margin: 0 auto;
    height: 20px;
    background-color: #666600;
    padding: 20px;
}

#navigation {
    float: top;
    width: 100%;
    background: #333;
    height: 30px;
}
#navigation ul {
    margin: auto;
    padding: 0;
}
#navigation ul li {
    list-style-type: none;
    display: inline;
}

#navigation li a {
    display: block;
    float: left;
    color: #ffff99;
    text-decoration: none;
    border-left:  1px solid #fff;
    padding: 5px;
}

#navigation li a:hover {background: #383}

这也解决了桌面扩展问题和侧边栏100％高度问题。

长表列表的样式问题

4 个答案: