Html 调整窗口大小后的页面对齐_Html_Css

Html 调整窗口大小后的页面对齐

html css

Html 调整窗口大小后的页面对齐,html,css,Html,Css,每当我开发HTML页面时，我都会遇到调整窗口大小的问题。页面对齐受到干扰。一个元素或标记与另一个元素或标记重叠。我希望在调整页面大小时，我的页面应该保持不变&srollbars应该出现。有人建议解决方案。哪个样式属性（位置、溢出）适合用于此？在主体上设置一个宽度（或者，更优选地，一个最小宽度）不确定这是否是您需要的，但可能： overflow:auto; 这就是您要查找的内容我理解我认为，问题在于您将元素放置在相对位置（任何元素上的默认位置），因此相对于当前屏幕大小。你可以将位置更改为绝对，

每当我开发HTML页面时，我都会遇到调整窗口大小的问题。页面对齐受到干扰。一个元素或标记与另一个元素或标记重叠。我希望在调整页面大小时，

我的页面应该保持不变&srollbars应该出现。有人建议解决方案。哪个样式属性（位置、溢出）适合用于此？

在主体上设置一个

宽度（或者，更优选地，一个最小宽度
）
不确定这是否是您需要的，但可能：
overflow:auto;

这就是您要查找的内容
我理解我认为，问题在于您将元素放置在相对位置（任何元素上的默认位置），因此相对于当前屏幕大小。你可以将位置更改为绝对，它们不会移动，如果你不是css忍者，这会导致你失去控制。现在我将展示一些很酷的技术，如何控制元素
提示1：
把你的标签包起来！一个被包装的元素将保持不变！
例如：
html=>
<div id="box_wrapper">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

这是一种保持对象就位的好方法，如果指定溢出，它们将永远不会离开包装器元素
提示2：
位置：绝对位置；小心，这可能会变得一团糟
我在将徽标定位到屏幕角落时使用position absolute，这样，如果更改屏幕大小，徽标仍将保留在角落中。这很酷，因为您不需要为父元素指定宽度
html
本例将徽标放在左上方，登录按钮放在右侧，如果您随后更改屏幕大小，则会将其保留在需要的位置
我不想在这里写一个完整的教程，但这些技巧应该有助于设计适应多种屏幕尺寸的实心页面。
如果我看不到代码，很难猜测会出现什么问题，但我希望这能有所帮助。

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

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


您必须将页面加载时的正文宽度固定为像素，而不是基于已调整大小的浏览器窗口大小的%。是否有一种方法可以使窗口UI保持不变，如全宽、高度&我们可以通过滑动滚动条看到，即使窗口缩小到最小大小，原始窗口也完好无损。这是我在大多数网页上观察到的调整窗口大小的解决方案。如何实现这一点？在body标签中添加overflow:auto；大家好，窗口UI应该保持不变（好的，对于元素的宽度和高度的轻微收缩，比如填充或边距的减少），但是布局应该像以前一样保持不变（与全宽、全高一样），我们可以看到，即使在窗口缩小到最小尺寸后，通过滑动滚动条，一个窗口仍然完好无损。这是几乎所有网页最常用的窗口调整策略。如何实现这一点？
<div class="header">
 <img src="/images/logo.png" alt="page_logo">
 <div id="login_button">
   /*......*/
 </div>
</div>

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

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

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