Question

我为程序的输出添加了web界面，如下所示：

<body>
<table id="header" approx height is 100px, width is 50% of screen located in the middle>
...
</table>
<div id="programoutput">my program outputs stuff here using Ajax.PeriodicalUpdater</div>
</body>

我使用css作为div

#programoutput{ white-space:pre; }

并且程序的输出可能包含很长的行。因此，网页应该有水平滚动条。我想要的是确保#header始终位于屏幕中间（而不是正文），并且根据#programoutput的宽度，正文可能会变得比视口宽。

我差不多已经知道了，但是我遇到了一些问题：#programoutput本身不出现水平滚动条而不是窗口。如果输出的高度很小（在这种情况下就像几行）那么horizoncal滚动条位于窗口的中间。

Answer 1

#header
{
 position:fixed;
 width:50%;
 left:25%;
}
#programoutput
{
 white-space:pre;
 overflow:visible;
}

此时，table应放在查看端口的中心，div应足够长，以便body生成滚动条

但由于table为position:fixed，因此您的div会“漂浮”在您的桌子上。现在您有几个选择：

<强> 1 即可。给你的div一个最高职位：

position:relative;
top:100px; /* you'll have to know your table's height */

<强> 2 即可。将div放在body的底部（这在您的代码中似乎有效）：

position:absolute;
bottom:0px;

动态内容的html布局

1 个答案: