HTML空间划分和大小调整
我目前正在开发一个 Chrome 扩展(这意味着我不需要跨浏览器解决方案)。
基本上,我希望我的网页分为两部分。左面板占宽度的 20% 和高度的 100%,右面板占宽度的 80% 和高度的 100%。这些面板将包含各种元素、文本区域、列表、选择。
问题是我不知道如何实现这一目标并处理调整大小。目前,我使用带有 window.onresize 挂钩的 jQuery。我不断根据窗口的大小更改宽度和高度。
我想知道是否可以用更简单的方式来完成,例如使用 CSS。我应该使用什么?一个 div、一张桌子等...
提前致谢。
I'm currently developping a Chrome extension (which means that I don't need a cross browser solution).
Basically, I want my web page to be separated into two parts. A left panel which would take 20% of the width and 100% of the height and a right panel which would take 80% of the width and 100% of the height. Those panels would contain various elements, textareas, list, select.
The issue is that I don't know how to achieve this and to handle resizement. Currently, I'm using jQuery with a window.onresize hook. I keep changing the width and height based on the window's size.
I want to know if that could be done in a simplier way, using CSS for instance. And what should I use? A div, a table, etc...
Thanks in Advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以将现有面板或元素 div 和跨越包含相对 div 的内部。如果
您对面板 div 使用position:absolute,然后它们将被定位
绝对是相对于包含的 div,而不是页面主体。
http://css-tricks.com/791-absolute-positioning-内部相对定位/
You could put the existing panel, or element divs & spans inside a containing relative div. If
you use position:absolute for the panel divs, they will then be positioned
absolutely, relative to the containing div, not the page body.
http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
请将 css 添加到您的 div 中,添加
min-height
和max-height
属性Please adding css into your div, add
min-height
, andmax-height
properties