0

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

4

4 回答 4

2

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

于 2012-05-25T09:40:48.413 回答
0

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

overflow:auto;

是你要找的

于 2012-05-25T09:41:06.650 回答
0

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

提示1：包装你的标签！包裹的元素将保持原状！例子：

html =>

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

CSS =>

#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;
}

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

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

于 2012-05-25T12:25:27.537 回答
0 
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
 pageWidth = document.getElementById('page').offsetWidth;

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

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

于 2013-12-14T17:00:27.563 回答