如何保持 div 来自 overlapping/moving/making 我的页面在调整宽度 and/or 浏览器高度 window 时看起来很难看

Question

所以我试图能够将所有内容保留在 window 重新调整大小的位置.. 我希望的示例类似于 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
}

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

Answer 1

我明白了！对我来说，添加 1366 像素的最小和最大宽度就成功了！

<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>

我对它目前的结果有点满意，但是，仍然对更好的方法持开放态度:)

如何保持 div 来自 overlapping/moving/making 我的页面在调整宽度 and/or 浏览器高度 window 时看起来很难看

How to keep divs from overlapping/moving/making my page look ugly when resizing width and/or height of browser window

html

css

resize

margin

padding