html - CSS模仿silverlight屏幕截图

Question

我很确定这个问题已经被提出并得到了回答，我对 HTML 和 CSS 的了解还不够，不知道在哪里或如何搜索。任何帮助将不胜感激。

我有一个用 Silverlight 构建的社区应用程序:http://www.scalerailsonline.com/default.aspx

最终决定放弃微软，我从头开始重写它。 90% 很容易。我正在努力使用 HTML 和 CSS 来完成应用程序的聊天部分。

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

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

首先，我想让网页展开或收缩以适合浏览器窗口。

右侧第二列水平扩展以适应内容，底部区域垂直扩展以适应聊天输入控件。

一旦页面适合浏览器并且空间被分配到右侧和底部，我希望容器适合。如果容器中的内容过多(99% 的情况下都会)，则会显示垂直滚动条。

我试过各种宽度/高度的组合:100%。但这似乎只是让区域足够大以适应内容，而不是限制为 100% 的浏览器。

我可以将 div 设置为“高度:200%；溢出:滚动”以获得滚动条。但我似乎无法让 div 仅扩展到可用空间。

Answer 1

First I want to have the web page expand or contract to fit in the browser window.

这可以通过将 ma​​rgin left 和 right 设置为 auto 来实现。试试这个 -

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