CSS模仿银光屏幕截图

Question

我很确定这个问题已经被问及并回答了，我不太了解HTML和CSS，知道在哪里或如何搜索。任何帮助将不胜感激。

我在Silverlight中构建了一个社区应用程序：http://www.scalerailsonline.com/default.aspx

终于决定给微软这个chuck我正在从头开始重写它。 90％很容易。我正在努力使用HTML和CSS来完成应用程序的聊天部分。

我已经标记了一个屏幕截图，以显示我正在尝试做的事情。

主要目标是创建一个可扩展和收缩的可滚动容器，以适应可用空间。

首先，我想让网页扩展或缩小以适应浏览器窗口。

Second Right列水平扩展以适合内容，底部区域垂直扩展以适合聊天条目控件。

一旦页面适合浏览器并且空间被提交到右侧和底部，我希望容器适合。如果容器中的内容太多（99％的时间），则会显示垂直滚动条。

我尝试过宽度/高度的各种组合：100％。但这似乎只是使区域足够大以适应内容，而不是限制在100％的浏览器中。

我可以将div设置为“Height：200％; Overflow：Scroll”以获得滚动条。但我似乎无法将div扩展到可用空间。

Answer 1

  

首先，我想让网页扩展或缩小以适应浏览器窗口。

这可以通过将边距左右设置为自动来实现。试试这个 -

.center {
    margin: 0 auto;
    padding: 0;
    float: none;
}

Answer 2

答案是：确实没有一个好的答案。借助javascript调整大小事件来根据屏幕空间设置框的高度 - 屏幕元素的高度。