HTML5“固定”浮动DIV？
汤姆
我很难把这个问题放在关键字中，所以我无法检查重复的内容，因此，我事先表示歉意。
我正在尝试编写我的第一个HTML5页面，并且在预览中发现，如果减小浏览器窗口的大小，DIV将从其位置移开以适应较小的空间，从而使所有内容一团糟。我希望一切保持固定状态，就像在全屏模式下一样，最终弹出水平/垂直滚动条进行导航，即在我偶然发现的99％的网页中会发生什么。
我怀疑问题出在我使用的“浮动”样式，因为“浮动”听起来像是“固定”的对立面，但是我找不到其他方法来保持DIV并排。
我将添加一些代码来制作示例：
var xx=screen.availWidth;
var yy=screen.availHeight;<header> <h1>Big Title</h1> </header>
<div id="twoblocks">
<div id="leftblock" style="float:left;width:85*xx/100">
<div id="lefttop">
<section> (Some text here) </section>
</div>
<div id="leftbottom">
<section> (More text here> </section>
</div>
</div>
<div id="rightblock" style="float:right;width:10*xx/100">
<div id="rightbar">
<ul>
(list items here)
</ul>
</div>
</div>
</div>提前致谢。
这是全屏和窗口化页面的图像。
满的：
窗口化：
汤姆
我研究了一些，清理了头脑，解决了我的问题。万一其他人可以从中受益，我会尽力澄清我的问题，然后再回答。
实际上有两个问题：
1）我需要<body>固定页面（例如）的宽度，因此它不会与窗口一起“缩小”（请参阅问题所附的图片）。
2）此固定宽度必须可变，具体取决于用户的屏幕宽度。
Number 1) would be solved by "wrapping" the body in a <div>, and declaring such <div>'s width with a constant, e.g.
<div id="bod" style="width:1900px">
<body>
(...)
</body>
</div>
This way the page width remains the same both in full screen mode or in any windowed size, eventually popping scrollbars for navigation.
In order to solve number 2), i.e. fixating the <div> width to a variable depending on the screen size, I wrote a small Javascript function:
function thewidth(id,m,a) {
var xx = screen.width;
var w = xx*m+a;
document.getElementById(id).style.width=w+"px";
}
Which sets the width of the selected div equal to the screen width, times a parameter, plus eventually another parameter.
So if I want to fixate the body width to 85% of the screen size (which is what I was randomly trying to do in the code I posted within my question) I still need to wrap it inside a <div>, and then call this function right before </body> as thewidth("bod",0.85,0). I actually wanted to call this upon onload, but for some reason it wasn't firing, so I manually called it at the end of the section.
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在HTML5上使用向左浮动时，div底部的边距
- 2
在HTML5上使用向左浮动时，div底部的边距
- 3
HTML5（引导程序）：显示“浮动”错误消息
- 4
页脚中的浮动/固定div
- 5
页脚中的浮动/固定div
- 6
如何设置固定的html5视频高度？
- 7
HTML5全屏API和DIV
- 8
HTML5语义元素与 div标签
- 9
HTML5中div元素的重叠
- 10
html5标记或div用于性能
- 11
HTML5全屏API和DIV
- 12
HTML5 div包装克隆
- 13
管理HTML5 DIV大小
- 14
HTML5 不加载隐藏的 div？
- 15
HTML5设计的网站-在Chrome和Opera中查看时，固定按钮不再保持固定
- 16
HTML5画布浮动颗粒自适应修复程序？
- 17
正确的HTML5标记，用于浮动徽标，标语和2个导航
- 18
正确的HTML5标记，用于浮动徽标，标语和2个导航
- 19
无法使div在HTML中浮动
- 20
无法使div在HTML中浮动
- 21
将固定宽度的div浮动到未知宽度的div
- 22
禁用div子级删除（Html5拖放）
- 23
用什么代替HTML5中的div元素
- 24
HTML5 /铯-使div浮在铯地图上
- 25
HTML5 Div样式不起作用
- 26
div上的HTML5 tex-decoration
- 27
将隐藏的div静音（视频）html5
- 28
CSS HTML5 DIV将所有内容对齐
- 29
html5：在屏幕键盘上为div启用
我来说两句