HTML5“固定”浮动DIV？

Question

我很难把这个问题放在关键字中，所以我无法检查重复项，因此，我事先表示歉意。

我正在尝试编写我的第一个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>

提前感谢。

这里是全屏和窗口化页面的图像。

全：

窗：

Answer 1

我研究了一些，清理了头脑，解决了我的问题。万一其他人可以从中受益，我会尽力澄清我的问题，然后回答。

实际上有两个问题：

1）我需要固定页面（例如<body>）的宽度，因此它不会与窗口一起“缩小”（请参见问题所附的图片）。

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

数字1]可通过将主体“包裹”在<div>中，并使用常数声明此<div>的宽度来解决，例如]]

<div id="bod" style="width:1900px">
    <body>
    (...)
    </body>
</div>
这样，在全屏模式或任何窗口大小下，页面宽度都保持不变，最终会弹出滚动条进行导航。

[为了解决数字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“固定”浮动DIV？

问题描述投票：0回答：1

1个回答

最新问题

HTML5“固定”浮动DIV？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1