调整页面大小时防止 div 移动答案

【问题标题】：Prevent div from moving while resizing the page调整页面大小时防止 div 移动
【发布时间】：2012-02-09 03:23:37
【问题描述】：

我对 CSS 很陌生，我正在尝试建立一个页面并运行。我管理成功生成我认为不错的页面，直到我调整大小浏览器窗口然后一切都开始移动。我不知道为什么这正在发生！

有人可以给我一些建议吗？当我调整窗口大小时，我会就像“对象”留在原地，但要调整窗口大小。为了例如，如果我将窗口的下角向上和向左拖动，我会希望看到右下角的内容消失并滚动条出现但左上角的对象将准确地停留在哪里他们是。

我有道理吗？

看看我的页面的工作情况：http://aimmds1.estheticdentalcare.co.in/

然后尝试通过向左拖动正确的大小来调整浏览器窗口的大小。看看标题中的内容，还有菜单栏..他们跳下来，标题内容也跳下来然后我溢出：隐藏； .. 但据我所知，这一切都不是正确的方法。

请在此处找到 html 和 CSS：http://jsfiddle.net/swati/hCDas/

我已经尝试过 prevent div moving on window resize ，我尝试设置 min-width:820px;对于 div header ，那个 main 包含 div .. 但这并不能解决它。

感谢您的帮助。

【问题讨论】：

标签： html css layout resize

【解决方案1】：

1 - 从您的 BODY CSS 中删除边距。

2 - 将所有 html 包装在一个包装器中 <div id="wrapper"> ... all your body content </div>

3 - 定义包装器的 CSS：

这会将所有内容放在一起，以页面为中心。

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

【讨论】：

如果有效，请检查正确答案并投票赞成那些有帮助的答案。
:) 是的，这就是我最终所做的，尽管所有答案都很有帮助
所以这是唯一的方法？我的意思是，这很简单，还是有点破解？

【解决方案2】：

您可以使用两种类型的测量来指定宽度、高度、边距等：相对的和固定的。

亲戚

相对度量的一个示例是您使用的百分比。百分比与其包含的元素相关。如果没有包含元素，则它们是相对于窗口的。

<div style="width:100%"> 
<!-- This div will be the full width of the browser, whatever size it is -->
    <div style="width:300px">
    <!-- this div will be 300px, whatever size the browser is -->
        <p style="width:50%">
            This paragraph's width will be 50% of it's parent (150px).
        </p>
    </div>
</div>

另一个相对度量是与字体大小相关的 ems。

已修复

固定度量的一个示例是像素，但固定度量也可以是 pt（点）、cm（厘米）等。固定（有时称为绝对）度量始终大小相同。一个像素永远是一个像素，一厘米永远是一厘米。

如果您对尺寸使用固定测量值，则浏览器尺寸不会影响布局。

【讨论】：

【解决方案3】：

我宁愿使用静态宽度，如果您希望页面根据屏幕尺寸调整大小，您可以查看media queries。

或者，您可以在标题、导航、内容等元素上设置最小宽度。

【讨论】：

【解决方案4】：

嗨，首先，您的 html 中似乎有很多“错误”，您缺少结束标记，您可以尝试将 <body> 的内容包装在固定宽度 <div style="margin: 0 auto; width: 900px> 中，以实现您对 @ 所做的事情987654324@

【讨论】：

感谢您尽可能快的响应，我尝试这样做并且似乎工作正常，并且我已经更新了同一链接上的页面，aimmds1.estheticdentalcare.co.in ....试图进一步居中。非常感谢..还有很长的路要走:)..但它很有趣
>>> [在您的 html 中缺少结束标记的许多“错误”] 在尝试编写 HTML 之前，您确实需要找到并使用所谓的“语言敏感编辑器”。例如“scite” 就是这样一个编辑器，而且很容易学习。即便如此，只要您怀疑语法有问题，您可以使用众多“Html Validator”网站中的一个。（要找到一个，只需执行谷歌搜索“Html 验证”。）