如何在调整浏览器窗口的宽度和/或高度时防止 div 重叠/移动/使我的页面看起来很难看答案

【问题标题】：How to keep divs from overlapping/moving/making my page look ugly when resizing width and/or height of browser window如何在调整浏览器窗口的宽度和/或高度时防止 div 重叠/移动/使我的页面看起来很难看
【发布时间】：2015-05-10 15:21:36
【问题描述】：

所以我试图能够将所有内容保持在窗口重新调整大小的位置。我希望的一个示例类似于 Facebook 的注册页面（或 facebook 上的任何页面）。 . 当我最小化它的宽度时，一切都隐藏在浏览器后面）。我包含了两个链接，一个是 jfiddle，第二个是实际测试页面：

https://jsfiddle.net/0nskvmjc/

http://sushionfir3.byethost7.com/test/register.php

这是我自己的注册页面的 html

<!--background image-->
<style type="text/css">
  body {
   background-image: url(bg/bg.jpg);
   background-size: cover;
}
</style>
<!---->

<body>
<!--top green transparent bar-->
  <nav class="bar"></nav>

 <div class="logo">
  <img src="img/logo.png" height=90px>
 </div>
 <br />

 <div class="login">Log in</div>
  <div class="signin">
   <form class="pure-form" action="#" method="post">
    <input class="input" type="text" placeholder="Email">
    <input class="input" type="password" placeholder="Password">
    <button type="submit" class="button-sign pure-button">Sign in</button>
   </form>
<!---->

<!--registration form start-->
 <div id="reg_border"></div>
 <div class="reg_form">
  <h2 id="register_right">Registration is free and easy!</h2>
 <div class="form_inputs">
 <form class="pure-form" action="#" method="POST">
   <input class="input" type="text" name="firstname" placeholder="First name" />
   <input class="input" type="text" name="lastname" placeholder="Last name" /><br />
   <input class="input" type="email" name="email" placeholder="Email" size="49" /><br />
   <div class="space">
   <input class="input" type="text" name="remail" placeholder="Please re-enter your Email" size="49" /><br />
   </div>
   <div class="space">
   <input class="input" type="password" name="npassword" placeholder="New password" size="49" />
   </div>
   <p class="birthdate">Date of birth</p>
  <div class="birthday_options">
   <select class="months">
     <option value="jan">Jan</option>
     <option value="feb">Feb</option>
     <option value="mar">Mar</option>
     <option value="apr">Apr</option>
     <option value="may">May</option>
     <option value="jun">Jun</option>
     <option value="jul">Jul</option>
     <option value="aug">Aug</option>
     <option value="sep">Sep</option>
     <option value="oct">Oct</option>
     <option value="nov">Nov</option>
     <option value="dec">Dec</option>
   </select>
   <select class="days">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
  </select>
   <input class="input" type="text" name="year" placeholder="mm/dd/yyyy" size="10" />
  </div><!--birthdaymonths-->
  <p class="sex">Gender</p>
   <div class="genders">
    <input type="radio" name="gender" value="1">Male</input>&nbsp;&nbsp;
    <input type="radio" name="gender" value="2">Female</input>
   </div>
     <button id="signup" type="submit" class="button-sign pure-button">Sign up!</button>
   </form>
  </div><!--form_inputs-->
 </div><!--reg_form-->
</body>

这是它的css

.bar {
      width: 100%;
      height: 90px;
      background-color: rgba(0,160,135,0.4);
}

.logo {
      margin-top: -88px;
      padding-left: 50px;
}

.login {
      text-align: right;
      margin-top: -100px;
      margin-right: 486px;
      color: white;
}

.signin {
      text-align: right;
      padding-right: 50px;
      padding-top: 5px
}

#reg_border {
      background: rgba(0,160,135,0.4);
      width: 32%;
      height: 70%;
      margin: 6% 1% 3% auto;
      -webkit-border-radius: 70px;
      -moz-border-radius: 70px;
      -o-border-radius: 70px;
}

.reg_form {
      text-align: right;
      padding-right: 24px;
      line-height: 48px;
      margin-top: -525px;
}

.input {
      line-height: 20px
}

#register_right {
      padding-right: 29px;
      padding-top: 30px
}

.birthdate {
      margin: auto 310px auto 100px;
}

.birthday_options {
      margin: -10px 125px auto 100px;
}

.sex {
      margin: -5px 345px auto 100px;
}

.genders {
      margin: -20px 265px auto auto;
}

.space {
      margin-top: 4px
}

#signup {
      width: 13em;
      margin: 2px 95px auto auto
}

提前谢谢你。我试过查找这些问题，但其他人的问题的答案似乎对我没有用..也许问题出在我已经编码的范围内，添加额外的代码不会有帮助，或者可能是它是，我不确定哈哈。再次感谢。

【问题讨论】：

最好添加一个 jsfiddle 链接，以便人们可以使用更新的答案对其进行编辑
jsfiddle.net/0nskvmjc
sushionfir3.byethost7.com/test/register.php

标签： html css resize margin padding

【解决方案1】：

我明白了！对我来说，添加 1366px 的最小和最大宽度就可以了！

<style type="text/css">
body, html {
  background-image: url(bg/bg.jpg);
  background-size: cover;
  width: 100%;
  height: 100%;
  min-width: 1366px;
  margin: auto auto;
  max-width: 1366px;
 }
</style>

我对它目前的结果有些满意，但是，仍然有更好的方法:)

【讨论】：