Html 为什么页脚不是'；集装箱里有什么？_Html_Css_Footer

Html 为什么页脚不是'；集装箱里有什么？

html css

Html 为什么页脚不是'；集装箱里有什么？,html,css,footer,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="styl

当我将页脚的宽度设置为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>

您需要

框大小：边框框

，因为在

填充

中有

宽度：100%

然后有额外的

20px

/*************************************************
*******************CSS重置********************
*************************************************/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
许可证：无（公共域）
*/
html，
身体，
分区，
跨度
小程序，
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
A.
缩写，
缩略语
地址:，
大的
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
s
桑普，
小的
罢工
坚强的
附属的，
啜饮，
tt，
var，
B
U
我
居中
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
文章
在一边
帆布，
细节，
嵌入
图形
figcaption，
页脚，
标题，
hgroup，
菜单，
导航，
产出，
红宝石，
第节，
总结，
时间
做记号
音频
录像带{
保证金：0；
填充：0；
边界：0；
}
/*旧浏览器的HTML5显示角色重置*/
文章
在一边
细节，
figcaption，
图形
页脚，
标题，
hgroup，
菜单，
导航，
部分{
显示：块；
}
*,
*：：之前，
*：：之后{
框大小：边框框
}
身体{
背景色：#ffffff；
字体系列：“开放式Sans”，无衬线；
}
.集装箱{
保证金：0；
填充：0；
背景色：#e6fa；
身高：100%；
宽度：100%；
边框：1px纯绿色；
}
#头套{
保证金：0自动；
宽度：100%；
填充：0；
高度：100px；
边框底部：5px纯色棕色；
背景：#1e90ff；
}
/*****************************
*******标题部分*******
*****************************/
#标题{
保证金：0自动；
填充：10px；
高度：100px；
/*边框：1px纯绿色*/
}
#收割台img{
高度：77px；
宽度：322px；
左边距：20px；
边缘顶部：5px；
浮动：左；
/*边框：1px纯黄色*/
}
#表格1{
浮动：对；
/*边框：1px纯红*/
线高：90px；
}
#表格1输入{
宽度：150px；
高度：10px；
填充：10px；
}
#form1按钮{
宽度：100px；
填充：8px；
右边距：20px；
边界半径：25px；
}
#form1按钮：悬停{
背景颜色：蓝色；
颜色：#ffffff；
}
#form1按钮：激活{
背景色：深蓝色；
}
/*****************************
*******内容部分******
*****************************/
#主要内容{
宽度：70%；
高度：530px；
保证金：0自动；
边缘顶部：10px；
/*边框：1px纯红*/
}
#内容1 h2{
边缘底部：10px；
}
#内容1 img{
浮动：左；
右边距：40px；
宽度：550px；
高度：400px；
/*边框：1px纯红*/
}
#内容2{
浮动：对；
右边距：10px；
利润上限：-54px；
/*位置：相对位置*/
/*底部：452px*/
/*左：60px*/
/*边框：1px纯黄色*/
}
#内容2 h1{
显示：内联块；
边缘底部：10px；
/*边框：1px实心橙色*/
}
#内容2输入{
宽度：250px；
高度：20px；
填充：10px；
边界半径：5px；
边框：1px实心#000000；
}
#内容2选择{
宽度：270px；
填充：10px；
边界半径：5px；
边框：1px实心#000000；
}
#内容2按钮{
/*位置：相对位置*/
宽度：270px；
填充：10px；
边缘顶部：20px；
保证金权利：4px；
/*顶部：10px*/
/*左：-3px*/
}
#content2按钮：悬停{
背景颜色：蓝色；
颜色：#ffffff；
}
#content2按钮：活动{
背景色：深蓝色；
}
#内容2 h1{
填充物：5px；
左边距：112px；
}
/*****************************
********页脚部分******
*****************************/
#页脚{
填充：10px；
高度：105px；
宽度：100%；
背景色：#1e90ff；
边框顶部：5px纯色棕色；
明确：两者皆有；
}
#页脚h2{
文本对齐：居中；
填充顶部：20px；
颜色：#ffffff；
}


电子邮件：
密码：
登录


加入最好的在线约会社区！
在这里注册！
姓名：
密码：
电邮地址：
性别：
选择你的性别
男性
女性
出生日期：
国家：
选择一个国家
美国
加拿大
墨西哥
中国
大不列颠联合王国
越南
注册
社交网络&复制；2016

您是否也可以发布问题的屏幕截图？您在哪个浏览器中看到了问题？您好，韦斯·福斯特，附件是问题的打印屏幕：

框大小：边框框

。但是我应用到了所有的元素，如果你想，你可以只应用到页脚。

/*************************************************
******************* 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;
}