Question

当我开发HTML页面时，我会遇到窗口调整大小的问题。页面对齐受到干扰。一个元素或标签与另一个元素或标签重叠。我希望我调整大小时的页面，我的页面应该保持不变＆amp; srollbars应该出现。有人请建议解决方案。哪个样式属性（位置，溢出）适合用于此？

Answer 1

在身体上设置width（或者更优选地，min-width）

Answer 2

不确定这是否是您所需要的，但可能是：

overflow:auto;

是您正在寻找的

Answer 3

我理解我认为，问题在于您将元素放在相对位置（任何元素上的位置的默认值），因此相对于当前屏幕大小。您可以将位置更改为绝对位置，并且它们不会移动，如果您不是css忍者，这可能会导致您失去控制。生病了一些很酷的技术，现在如何控制元素。

提示1：包装你的标签！一个包裹的元素将留下来！例如：

html =＆gt;

<div id="box_wrapper">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

css =＆gt;

#box_wrapper {
  margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
  height: 300px; /*what ever height you want*/
  width: 1200px; /*what ever width you want*/
 }
.box {
  /*what dimensions you want*/
 }

这是保持对象到位的好方法，如果指定溢出，它们将永远不会离开包装元素。

提示2：位置：绝对;小心这可能会变得混乱。

我在将徽标定位到屏幕一角时使用绝对位置，这样如果您更改屏幕大小，徽标仍将保留在角落中。这很酷，因为您不需要父元素的指定宽度。

HTML

<div class="header">
 <img src="/images/logo.png" alt="page_logo">
 <div id="login_button">
   /*......*/
 </div>
</div>

CSS

.header {
  width: 100%
  height: 150px;
  border: 1px solid #ccc; 
}
.header img{
  position: absolute;
  margin: 0px; /*position: absolute must have a margin even if its 0*/
  float: left;
  height: 150px;
}
#login_buttons {
 float:left;
 position: absolute right;
 margin-right: 5px;
}

此示例在左上角放置徽标，在右侧放置登录按钮，如果您随后更改屏幕尺寸，则会将它们保留在需要的位置。

我不想在这里写一个完整的教程，但这些技巧应该有助于设计适应多种屏幕尺寸的实体页面。如果我看不到代码，我很难猜出问题是什么，但我希望这会有所帮助。

Answer 4

<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
 pageWidth = document.getElementById('page').offsetWidth;

pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>

你必须根据调整后的浏览器窗口大小将页面加载时的正文宽度修改为像素而不是％。

窗口调整大小后页面对齐

4 个答案: