Question

我想要的是让我的页面对桌面浏览器有点响应。

例如，当我减小浏览器的宽度时，页面的左右部分应该相互堆叠。请查看代码，您将了解。 outerLeft和outerRight div分别左右浮动。当我减小浏览器的宽度时，outerRight会低于outerLeft，这很好。但问题是页脚和版权（最后两个底部的div）div。由于outerRight div，它们不会被取代。我希望他们在outerRight之下。我怎么能这样做？

HTML：

<body style="margin: 0px">
<div class="outer">
    <div id="header"></div>
  <div class="outerLeft">
    <h1><a style="text-decoration: none; color: white;" href="login.php">WinkCage</a></h1>
    <br />
    <p>Instant Messaging web application</p>
  </div>
  <div class="outerRight">
    <div class="loginform">
      <form name="form2" method="post">
        <table>
          <tr>
            <td><input type="text" name="uname" placeholder="Username" required/></td>
            <td><input type="password" name="pass" placeholder="Password" required/></td>
            <td><input id="logbutton" type="submit" name="sub" value="Login"/></td>
          </tr>
        </table>
      </form>
      <p><?php echo $loginerror; ?></p>
    </div>
    <div class="signform">
      <form id="signupform" name="form1" method="post" enctype="multipart/form-data">
        <table>
          <tr>
            <td><input type="text" name="name" placeholder="Enter your name" required /></td>
            <td rowspan="3"><div class="propic"><img id="imgid" src="images/dp.png" /></div>
              <input id="imgInput" type="file" name="image" required/></td>
          </tr>
          <tr>
            <td><input type="text" name="username" placeholder="Enter username" required pattern="[a-zA-Z0-9]{6,}" title="The username must contain minimum 6 and ONLY alphanumeric characters."/></td>
          </tr>
          <tr>
            <td><input id="digits" type="text" name="phone" maxlength="10" placeholder="Enter your phone no." pattern=".{10}" required title="Invalid entry. Minimum 10 digits are required."/></td>
          </tr>
          <tr>
            <td><input id="typechange" type="password" name="password" maxlength="12" placeholder="Enter password" required pattern="[a-zA-Z0-9]{5,}" title="The password must contain at least 5 and ONLY alphanumeric characters."/>
              <div id="seepass"></div></td>
            <td><input type="submit" id="button" name="submit" value="Sign Up"></td>
          </tr>
        </table>
      </form>
      <div id="userexist"></div>
      <div style="clear: both"></div>
    </div>
  </div>
  <div style="clear: both"></div>
</div>
<div style="font-family: calibri; text-align: center; color: black; font-size: 16px; padding: 5px 0px 5px 0px;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage &copy; 2016</a></div>
<div style="height: 7px; box-shadow: 0px 0px 1px 1px grey; background-color: white; display: block"></div>
</body>

CSS：

html, body{
    height: 100%;
    background-color: aquamarine;
    }
#header{
    height: 20%;
    }
.outer{
    max-width: 1024px;
    margin: 0 auto;
    height: 94%;
    display: block;
    }
.outerLeft{
    float: left;
    width: 320px;
    height: auto;
    text-align: center;
    margin-top: 145px;
    padding-left: 50px;
    }
.outerRight{
    padding-left: 50px;
    float: left;
    width: auto;
    height: auto;
    }
.loginform{
    height: auto;
    width: 480px;
    box-shadow: 0px 0px 15px 0px grey;
    border-radius: 3px;
    padding: 20px 20px 20px 23px;
    background-color: white;
    color: red;
    }
.loginform input{
    width: 187px;
    height: 21px;
    padding-left: 5px;
    }
#logbutton{
    background-color: #00CC66;
    color: white;
    font-weight: bold;
    width: 70px;
    height: 28px;
    cursor: pointer;
    }
.signform{
    margin-top: 20px;
    margin-left: 0px;
    height: auto;
    width: 480px;
    box-shadow: 0px 0px 15px 0px grey;
    border-radius: 3px;
    padding: 20px 20px 10px 20px;
    background-color: white;
    }
.signform input{
    width: 250px;
    height: 24px;
    font-size: 20px;
    padding: 5px 10px 5px 10px;
    margin-bottom: 10px;
    }
#button{
    background-color: #0099FF;
    color: white;
    width: 188px !important;
    height: 41px !important;
    border-radius: 4px;
    border: 0px solid grey;
    display: block;
    font-weight: bold;
    margin-left: 10px;
    cursor: pointer;
    box-shadow: inset 0px 0px 4px grey;
    text-shadow: 1px 1px 2px black;
    }
.propic{
    height: 100px;
    width: 100px;
    margin: 0 auto;
    border: 4px solid white;
    box-shadow: 0px 0px 1px 1px grey;
    border-radius: 2px;
    background-color: grey;
    }
#imgInput{
    width: 187px !important;
    height: 22px !important;
    font-size: 14px;
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #cccccc;
    margin-left: 10px;
    }
#imgid{
    height: 100px;
    width: 100px;
    }

Answer 1

你需要给它一个clear: both！

<div style="font-family: calibri;text-align: center;color: black;font-size: 16px;padding: 5px 0px 5px 0px;clear: both;"><a style="text-decoration: none; color: black; display: block;" href="login.php">WinkCage © 2016</a></div>

<强> jsFiddle

注意：我建议您不要使用inline-css

Answer 2

不确定你想要什么.. 因为你有一个高度为94％的元素 - 我会说你总是希望看到这个页脚（固定在底部......）并为那个外部元素生成滚动。

如果这是你想要的，你可以在.outer类中加入overflow: auto。

.outer {
  max-width: 1024px;
  margin: 0 auto;
  height: 94%;
  display: block;
  overflow: auto;
}

看看这里.. https://jsfiddle.net/uvqk4eeL/1/

为什么这个页脚没有被这些浮动元素取代？

2 个答案: