如何在容器内部没有页脚？

时间：2016-07-25 16:05:03

标签： html css footer

当我将页脚的宽度设置为100％时，我注意到它在容器外部伸展（我认为基于我的HTML看起来在其中）。有太多的DIV，当我看了2-3次（而且我认为CSS是它的原因，我仍然无法弄清楚），但仍无济于事。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Social Network</title>
  <link rel="stylesheet" type="text/css" href="css/styles.css" media="all">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif] -->
</head>
<body>

<!-- HEADER -->
<div class="container">
    <div id="head_wrap">
        <div id="header">
          <img src="images/logo2.png">
          <form method="post" action="" id="form1">
            <strong>Email:</strong>
            <input type="text" name="email" placeholder="Email Address" required="required">
            <strong>Password:</strong>
            <input type="password" name="password" placeholder="Password" required="required">
            <button name="login">Login</button>
          </form>
        </div>
    </div>
<!-- HEADER -->




<!-- CONTENT -->
<div id="main_content">

  <!-- CONTENT1 -->
  <br>
  <div id="content1">
    <h2><em>Join the best online dating community!</em></h2>
    <img src="images/datephoto.png">
  </div>

  <!-- CONTENT2 -->
  <div id="content2">
    <form action="" method="post">
    <h1>Sign Up Here!</h1>
      <table>
        <tr>
          <td align="right">Name:</td>
          <td><input type="text" name="username" placeholder="Enter your name" required="required"></td>
        </tr>

        <tr>
          <td align="right">Password:</td>
          <td><input type="password" name="userpassword" placeholder="Enter your password" required="required"></td>
        </tr>

        <tr>
          <td align="right">Email Address:</td>
          <td><input type="email" name="useremail" placeholder="first.last@email.com" required="required"></td>
        </tr>

        <tr>
          <td align="right" required="required">Gender:</td>
          <td>
            <select name="user_gender">
              <option>Select your gender</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </td>
        </tr>

        <tr>
          <td align="right" required="required">Birthdate:</td>
          <td><input type="date" name="userbirthdate"></td>
        </tr>

        <tr>
          <td align="right" required="required">Country:</td>
          <td>
            <select name="user_country" >
              <option>Select a Country</option>
              <option>United States</option>
              <option>Canada</option>
              <option>Mexico</option>
              <option>China</option>
              <option>United Kingdom</option>
              <option>Vietnam</option>
            </select>
          </td>
        </tr>

        <tr>
          <td align="right" colspan="6">
            <button name="sign_up_btn">Sign Up</button>
          </td>
        </tr>

      </table>
    </form>
  </div>

</div>


<!-- FOOTER -->
<div id="footer">
  <h2>Social Network &copy; 2016</h2>
</div>

</div>

</body>
</html>

CSS代码：

/*************************************************
******************* CSS RESET ********************
*************************************************/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    background-color: #ffffff;
    font-family: 'Open Sans', sans-serif;
}

.container {
    margin: 0;
    padding: 0;
    background-color: #e6e6fa;
    height: 100%;
    width: 100%;
    border: 1px solid green;
}

#head_wrap {
    margin: 0 auto;
    width: 100%;
    padding: 0;
    height: 100px;
    border-bottom: 5px solid brown;
    background: #1e90ff;
}

/*****************************
******* HEADER SECTION *******
*****************************/

#header {
    margin: 0 auto;
    padding: 10px;
    height: 100px;
    /* border: 1px solid green; */
}

#header img {
    height: 77px;
    width: 322px;
    margin-left: 20px;
    margin-top: 5px;
    float: left;
    /* border: 1px solid yellow; */
}

#form1 {
    float: right;
    /*border: 1px solid pink;*/
    line-height: 90px;
}

#form1 input {
    width: 150px;
    height: 10px;
    padding: 10px;
}

#form1 button {
    width: 100px;
    padding: 8px;
    margin-right: 20px;
    border-radius: 25px;
}

#form1 button:hover {
    background-color: blue;
    color: #ffffff;
}

#form1 button:active {
    background-color: darkblue;
}

/*****************************
******* CONTENT SECTION ******
*****************************/

#main_content {
    width: 70%;
    height: 530px;
    margin: 0 auto;
    margin-top: 10px;
    /*border: 1px solid red;*/
}

#content1 h2 {
    margin-bottom: 10px;
}

#content1 img {
    float: left;
    margin-right: 40px;
    width: 550px;
    height: 400px;
    /*border: 1px solid pink;*/
}

#content2 {
    float: right;
    margin-right: 10px;
    margin-top: -54px;
    /*position: relative;*/
    /*bottom: 452px;*/
    /*left: 60px;*/
    /*border: 1px solid yellow;*/
}

#content2 h1 {
    display: inline-block;
    margin-bottom: 10px;
    /*border: 1px solid orange;*/
}

#content2 input {
    width: 250px;
    height: 20px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #000000;
}

#content2 select {
    width: 270px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #000000;
}

#content2 button {
/*  position: relative;*/
    width: 270px;
    padding: 10px;
    margin-top: 20px;
    margin-right: 4px;
    /*top: 10px;*/
    /*left: -3px;*/
}

#content2 button:hover {
    background-color: blue;
    color: #ffffff;
}

#content2 button:active {
    background-color: darkblue;
}

#content2 h1 {
    padding: 5px;
    margin-left: 112px;
}

/*****************************
******** FOOTER SECTION ******
*****************************/

#footer {
    padding: 10px;
    height: 105px;
    width: 100%;
    background-color: #1e90ff;
    border-top: 5px solid brown;
    clear: both;
}

#footer h2 {
    text-align: center;
    padding-top: 20px;
    color: #ffffff;
}

1 个答案:

答案 0 :(得分：2)

您需要box-sizing:border-box，因为您在width:100%中有20px然后额外padding。

/*************************************************
******************* CSS RESET ********************
*************************************************/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}
/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  background-color: #ffffff;
  font-family: 'Open Sans', sans-serif;
}
.container {
  margin: 0;
  padding: 0;
  background-color: #e6e6fa;
  height: 100%;
  width: 100%;
  border: 1px solid green;
}
#head_wrap {
  margin: 0 auto;
  width: 100%;
  padding: 0;
  height: 100px;
  border-bottom: 5px solid brown;
  background: #1e90ff;
}
/*****************************
******* HEADER SECTION *******
*****************************/

#header {
  margin: 0 auto;
  padding: 10px;
  height: 100px;
  /* border: 1px solid green; */
}
#header img {
  height: 77px;
  width: 322px;
  margin-left: 20px;
  margin-top: 5px;
  float: left;
  /* border: 1px solid yellow; */
}
#form1 {
  float: right;
  /*border: 1px solid pink;*/
  line-height: 90px;
}
#form1 input {
  width: 150px;
  height: 10px;
  padding: 10px;
}
#form1 button {
  width: 100px;
  padding: 8px;
  margin-right: 20px;
  border-radius: 25px;
}
#form1 button:hover {
  background-color: blue;
  color: #ffffff;
}
#form1 button:active {
  background-color: darkblue;
}
/*****************************
******* CONTENT SECTION ******
*****************************/

#main_content {
  width: 70%;
  height: 530px;
  margin: 0 auto;
  margin-top: 10px;
  /*border: 1px solid red;*/
}
#content1 h2 {
  margin-bottom: 10px;
}
#content1 img {
  float: left;
  margin-right: 40px;
  width: 550px;
  height: 400px;
  /*border: 1px solid pink;*/
}
#content2 {
  float: right;
  margin-right: 10px;
  margin-top: -54px;
  /*position: relative;*/
  /*bottom: 452px;*/
  /*left: 60px;*/
  /*border: 1px solid yellow;*/
}
#content2 h1 {
  display: inline-block;
  margin-bottom: 10px;
  /*border: 1px solid orange;*/
}
#content2 input {
  width: 250px;
  height: 20px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #000000;
}
#content2 select {
  width: 270px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #000000;
}
#content2 button {
  /*  position: relative;*/
  width: 270px;
  padding: 10px;
  margin-top: 20px;
  margin-right: 4px;
  /*top: 10px;*/
  /*left: -3px;*/
}
#content2 button:hover {
  background-color: blue;
  color: #ffffff;
}
#content2 button:active {
  background-color: darkblue;
}
#content2 h1 {
  padding: 5px;
  margin-left: 112px;
}
/*****************************
******** FOOTER SECTION ******
*****************************/

#footer {
  padding: 10px;
  height: 105px;
  width: 100%;
  background-color: #1e90ff;
  border-top: 5px solid brown;
  clear: both;
}
#footer h2 {
  text-align: center;
  padding-top: 20px;
  color: #ffffff;
}
<!-- HEADER -->
<div class="container">
  <div id="head_wrap">
    <div id="header">
      <img src="images/logo2.png">
      <form method="post" action="" id="form1">
        <strong>Email:</strong>
        <input type="text" name="email" placeholder="Email Address" required="required">
        <strong>Password:</strong>
        <input type="password" name="password" placeholder="Password" required="required">
        <button name="login">Login</button>
      </form>
    </div>
  </div>
  <!-- HEADER -->
  <!-- CONTENT -->
  <div id="main_content">

    <!-- CONTENT1 -->
    <br>
    <div id="content1">
      <h2><em>Join the best online dating community!</em></h2>
      <img src="images/datephoto.png">
    </div>

    <!-- CONTENT2 -->
    <div id="content2">
      <form action="" method="post">
        <h1>Sign Up Here!</h1>
        <table>
          <tr>
            <td align="right">Name:</td>
            <td>
              <input type="text" name="username" placeholder="Enter your name" required="required">
            </td>
          </tr>

          <tr>
            <td align="right">Password:</td>
            <td>
              <input type="password" name="userpassword" placeholder="Enter your password" required="required">
            </td>
          </tr>

          <tr>
            <td align="right">Email Address:</td>
            <td>
              <input type="email" name="useremail" placeholder="first.last@email.com" required="required">
            </td>
          </tr>

          <tr>
            <td align="right" required="required">Gender:</td>
            <td>
              <select name="user_gender">
                <option>Select your gender</option>
                <option>Male</option>
                <option>Female</option>
              </select>
            </td>
          </tr>

          <tr>
            <td align="right" required="required">Birthdate:</td>
            <td>
              <input type="date" name="userbirthdate">
            </td>
          </tr>

          <tr>
            <td align="right" required="required">Country:</td>
            <td>
              <select name="user_country">
                <option>Select a Country</option>
                <option>United States</option>
                <option>Canada</option>
                <option>Mexico</option>
                <option>China</option>
                <option>United Kingdom</option>
                <option>Vietnam</option>
              </select>
            </td>
          </tr>

          <tr>
            <td align="right" colspan="6">
              <button name="sign_up_btn">Sign Up</button>
            </td>
          </tr>

        </table>
      </form>
    </div>

  </div>


  <!-- FOOTER -->
  <div id="footer">
    <h2>Social Network &copy; 2016</h2>
  </div>

</div>

相关问题
最新问题