浏览器调整大小时如何使网页内容不折叠或处置答案

【问题标题】：How to make webpage content not to get collapse or disposition when browser re-sized浏览器调整大小时如何使网页内容不折叠或处置
【发布时间】：2015-06-01 19:23:56
【问题描述】：

我已经创建了一个网页和一些分区，在其中跨越但是当我重新调整浏览器窗口的大小时，分区和跨度得到配置和折叠或相互重叠，请告诉我一个解决这个问题的方法作为整个网页内容在重新调整浏览器窗口大小时保持不变，就像 google.com 一样。

编辑#01- 这是代码片段：-

<html><head><title>Demo</title>


</head>
<body style="
    margin-bottom: 0px;
    width: 100%;    
">
<div id="header" style="
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 49px;
    width: 100%;
    background-color: blue;
    border-bottom: darkblue;
"><div style="
    margin-top: 17px;
"><span style="
    margin-left: 257px;
    color: white;
    font-weight: bold;
    font-size: larger;
">Header</span></div>

</div>
<div id="content" style="
  margin-left: 350px;
  margin-right: 350px;
  height: 100%;
  margin-top: 50px;
  border-left: solid 1px blue;
  border-right: solid 1px blue;
  background: lavander;
  box-shadow: 0px 0px 2px rgba(220, 220, 220, 0.22);
">
<div style="
  font-size: 2em;
  padding: 8px;
  padding-left: 16px;
  background: blue;
  padding-top: 6px;
  border-bottom: solid 1px darkblue;
  padding-bottom: 5px;
  color: rgb(72, 72, 72);
  margin-bottom: 11px;
">Content</div>

 <input type="Email" name="email" title="Email" id="email"      placeholder="Enter       your email here" required="required" spellcheck="false"    style="
  margin-left: 21px;
  height: 37px;
  width: 590px;
  border-radius: 5px;
  font-size: 1em;
  outline: none;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  padding: 5px;
  margin-right: 21px;
  margin-top: 2px;
  margin-bottom: 15px;
 "><br>

<input type="password" name="pass" title="Password" id="pass" placeholder="Enter your Password here" required="required" spellcheck="false" style="
margin-left: 21px;
height: 37px;
width: 590px;
border-radius: 5px;
font-size: 1em;
outline: none;
border-style: solid;
border-width: 1px;
border-color: blue;
padding: 5px;
margin-right: 21px;
margin-top: 2px;
margin-bottom: 15px;
"><br>
 <hr style="
    width: 589px;
    border: solid 1px darkblue;
           "><br>
</div>
</div>
</div>
</body></html>

【问题讨论】：

在顶层容器上设置最小宽度。

标签： html css google-chrome browser

【解决方案1】：

如果您提供了一些代码，我们可以轻松地向您展示修改的位置和内容，并解决您的问题。下次请提供您代码相关部分的代码示例。
将所有 html 内容（在 <body> 内）用以下样式的 div 包装起来：width:100%;min-width:1200px

注意：将 1200px 更改为最适合您的。

希望对您有所帮助，下次请在您的问题中提供代码。

希望有帮助。

更新：

更新您的代码后，这是您的解决方案：

改变

<body style="
    margin-bottom: 0px;
    width: 100%;    
">

到：

<body style="
    margin-bottom: 0px;
    width: 100%; 
    min-width:1200px;   
    position:relative;
">

【讨论】：

嘿，我已经发布了，现在。
Nothing Changed 它的显示仍然不合适。
尝试将position:relative 也添加到正文样式中