Fatal编程技术网
  • html/
  • Html 为什么这个页脚没有被这些浮动的元素替换？

Html 为什么这个页脚没有被这些浮动的元素替换？

html css

Html 为什么这个页脚没有被这些浮动的元素替换？,html,css,Html,Css,我想要的是让我的页面对桌面浏览器有点响应 例如，当我减小浏览器的宽度时，页面的左侧和右侧部分应该相互堆叠。请检查代码，你会明白的。outerLeft和outerRight div分别向左和向右浮动。当我减小浏览器的宽度时，outerRight会位于outerLeft之下，这很好。但问题在于页脚和版权（底部最后两个div）div。这些不会因为outerRight div而被替换。我希望它们位于outerRight之下。我该怎么做 HTML: <body style="margin: 0px"

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

例如，当我减小浏览器的宽度时，页面的左侧和右侧部分应该相互堆叠。请检查代码，你会明白的。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>

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;
    }
你需要给它一个
清晰的提示：两个都是
就是这个


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








注意：我建议您不要使用
内联css
不确定您想要什么。。
由于您有一个高度为94%的元素，我想说您总是希望看到该页脚（固定在底部…），并仅为该外部元素生成滚动条

如果这是您想要的，您可以在.outer类中包含一个
溢出：auto


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


看看这里。。