关于 html:CSS 模仿 silverlight 屏幕截图
CSS to mimic silverlight screen shot
我很确定这个问题已经被问及并得到了回答，但我对 HTML 和 CSS 的了解还不够，不知道在哪里或如何搜索。任何帮助将不胜感激。
我在 Silverlight 中构建了一个社区应用程序：http://www.scalerailsonline.com/default.aspx
终于决定给微软一个夹头，我正在从头开始重写它。 90% 很简单。我正在努力使用 HTML 和 CSS 来完成应用程序的聊天部分。
我已经标记了一个屏幕截图来显示我正在尝试做的事情。
主要目标是创建一个可滚动的容器，可以扩展和收缩以适应可用空间。
首先我想让网页扩展或收缩以适应浏览器窗口。
右侧第二列水平扩展以适应内容，底部区域垂直扩展以适应聊天条目控件。
一旦页面适合浏览器并且空间被提交到右侧和底部，我希望容器适合。如果容器中的内容太多(99% 的情况下)，则会显示垂直滚动条。
我尝试了各种宽度/高度的组合：100%。但这似乎只是使区域足够大以适应内容，而不是限制在 100% 的浏览器中。
我可以将 div 设置为 "Height: 200%; Overflow: Scroll" 以获取滚动条。但我似乎无法让 div 仅扩展到可用空间。
相关讨论
- 您的网站一点也不差，而且您在使用 HTML/css 解决方案时也会遇到同样多(更多？)的问题。我很好奇你为什么在经过这么多明显的努力后抛弃了微软的堆栈？
- 感谢您的客气话。实际上，我在 Silverlight/Azure 中有一个更大的应用程序，它也将被重写。变化的原因。主要是由于围绕 SEO 和监控的一些真正棘手的问题。爬虫不能很好地处理基于 Silverlight 的内容。而且 AdSense 也无法在 Silverlight 环境中运行。平板电脑(iPad 和 Android)不支持 Silverlight。最后，我的用户社区没有很好地适应缺少右键单击菜单。我已尽可能将它们包括在内，但使用第 3 方控件，您无法到达所有需要右键单击的位置。
答案是：确实没有一个好的答案。借助 java 脚本调整大小事件根据屏幕空间设置框的高度 - 屏幕元素的高度。
First I want to have the web page expand or contract to fit in the browser window.
这可以通过将左右边距设置为自动来实现。试试这个 -
1 2 3 4 5 |
.center { margin: 0 auto; padding: 0; float: none; } |
相关讨论
- 谢谢马赫什。右/左不是一个大问题。它将它设置为限制在垂直浏览器高度，这更是一个问题。