模仿silverlight屏幕截图的CSS答案

【问题标题】：CSS to mimic silverlight screen shot模仿silverlight屏幕截图的CSS
【发布时间】：2011-08-18 21:27:21
【问题描述】：

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

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

终于决定给微软一个夹头，我正在从头开始重写它。 90% 很简单。我正在努力使用 HTML 和 CSS 来完成应用程序的聊天部分。

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

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

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

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

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

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

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

【问题讨论】：

您的网站一点也不差，您在使用 HTML/css 解决方案时也会遇到同样多（更多？）的问题。我很好奇你为什么在做了这么多明显的努力后抛弃了微软的堆栈？
感谢您的客气话。实际上，我在 Silverlight/Azure 中有一个更大的应用程序，它也将被重写。变化的原因。主要是由于围绕 SEO 和监控的一些真正棘手的问题。爬虫不能很好地处理基于 Silverlight 的内容。而且 AdSense 也无法在 Silverlight 环境中运行。平板电脑（iPad 和 Android）不支持 Silverlight。最后，我的用户社区没有很好地适应缺少右键单击菜单。我已尽可能将它们包括在内，但使用第 3 方控件时，您无法访问所有需要右键单击的位置。

【解决方案1】：

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

这可以通过将 margin 左右设置为 auto 来实现。试试这个 -

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

【讨论】：

【解决方案2】：

答案是：确实没有一个好的答案。借助java脚本resize事件根据屏幕空间设置盒子的高度-屏幕元素的高度。

【讨论】：