<分区>
我正在创建一个页面来显示祖先的家谱。
该页面是动态创建的，所以我无法知道会有多少代或内容是什么。
然而，此处显示了一个相当简单的示例:http://myrootsmap.com/so_tree2.php .
就目前而言，它非常简单，因为它适合任何普通的浏览器窗口(我暂时不支持移动设备)。
然而，随着每一代的增加，树的宽度都会加倍，因此当表格对于视口(viewport)来说太大时，我需要进行良好的展示。
如果您缩小浏览器窗口的大小，您将看到:
- 树在需要时有自己的水平滚动条(好)
- 树总是左对齐(不好)
- 如果树对于视口(viewport)来说太高，则垂直滚动条在窗口上而不是树上(同样不好)
总而言之，我的 HTML 如下所示:
<div id="container">
<?php include( "includes/header_index.php"); ?>
<div id="wholetree">
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post" name="add_gen">
<input type="hidden" name="MM_insert" value="add_gen">
<a href="javascript:void()" onclick="document.add_gen.submit()" class="tree_button">Add Another Generation</a>
</form>
<form action="map.php" method="get" name="view_map">
<input type="hidden" name="origin" value="<?php echo $origin_id ?>">
<a href="javascript:void()" onclick="document.view_map.submit()" class="tree_button view_button">View the Map</a>
</form>
<div class="tree">
<?php include($tree); ?>
</div>
</div>
</div>
和 CSS
* {
margin: 0;
padding: 0;
}
#container {
display: flex;
min-height: 100%;
flex-direction: column;
}
#wholetree {
position: relative;
top: 120px
}
.tree {
overflow: auto;
padding: 10px
}
.tree ul {
padding: 0 0 20px;
position: relative;
}
.tree li {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
margin: 0 -2px 0 -2px;
text-align: center;
list-style-type: none;
position: relative;
padding: 0 5px 20px 5px;
}
问题:
- 如何让
div class=tree位于div id=wholetree的中心？ - 如果
div class=tree溢出，如何滚动到底部？和 - 如何在其上设置垂直滚动条？
我只喜欢 CSS，但如果这是唯一的方式，我会使用 jQuery。