HTML5 "fixated" 浮动 DIV？

Question

我很难把这个问题写成关键字，所以我无法检查重复项等，我提前道歉。

我正在尝试编写我的第一个 HTML5 页面，我通过预览注意到，如果我减小浏览器 window 大小，DIV 将从它们的位置移动以试图适应进入较小的space，把一切都弄得一团糟。 我希望一切都像在全屏模式下一样固定不动，最终弹出 horzontal/vertical 导航滚动条，即我偶然发现的 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>

提前致谢。

这是全屏和window页面的图像。

已满：

窗口化：

Answer 1

我又研究了一番，清醒了头脑，解决了我的问题。如果其他人可以从中受益，我会尝试澄清我的问题然后回答它。

实际上有两个问题：

1) 我需要固定页面（比如 <body>）宽度，所以它不会 "shrink" 和 window 一起（见问题附带的图片） .

2) 此固定宽度必须可变，具体取决于用户的屏幕宽度。

数字 1) 将由 "wrapping" 中的主体解决 <div>，并用常数声明此类 <div> 的宽度，例如

<div id="bod" style="width:1900px">
    <body>
    (...)
    </body>
</div>

这样，页面宽度在全屏模式或任何 windowed 大小下都保持不变，最终弹出滚动条进行导航。

为了解决数字 2)，即根据屏幕尺寸将 <div> 宽度固定为一个变量，我写了一个小的 Javascript 函数：

function thewidth(id,m,a) {
    var xx = screen.width;
    var w = xx*m+a;
    document.getElementById(id).style.width=w+"px";
}

设置所选 div 的宽度等于屏幕宽度，乘以一个参数，最后加上另一个参数。

因此，如果我想将主体宽度固定为屏幕尺寸的 85%（这是我在问题中发布的代码中随机尝试做的事情），我仍然需要将其包装在 <div>，然后在 </body> 之前调用此函数作为 thewidth("bod",0.85,0)。我实际上想在 onload 上调用它，但由于某种原因它没有触发，所以我在本节末尾手动调用它。

HTML5 "fixated" 浮动 DIV？

HTML5 "fixated" floating DIVs?

html

css-float