我创建了一个页脚div不工作的网页

时间：2017-01-06 07:56:56

标签： html css

我是html / css初学者并创建了这个网页，其中有三个主要的div标题，boxcontainer，footer。

页脚div存在一些问题，即它的背景在文本之前没有显示。我在盒子容器div中使用了浮动。

＆＃13;
＆＃13; 
<!doctype html>
<html>
<head>
    <style>
        div#header {
            margin-left: 1%;
            background-color: lightblue;
            height: 30px;
            width: 95%;
        }

        ul#menu li {
            margin: 10px;
            color: black;
            font-size: 25px;
            display: inline;
            margin-top: 100px;
        }

            ul#menu li:hover {
                color: white;
            }

        div.box {
            background-color: lightblue;
            height: 200px;
            width: 200px;
            float: left;
            margin: 10px;
            width: 30.3%;
        }

        div.boxhead {
            background-color: yellow;
            height: 30px;
            padding: 0px;
            width: 100%;
        }

            div.boxhead p {
                font-size: 150%;
                text-align: center;
                color: lightblue;
                height: 30px;
                width: 200px;
                padding: 0px;
                -webkit-margin-before: 0.0em;
                -webkit-margin-after: 0.0em;
            }

        div#footer {
            margin-left: 1%;
            background-color: lightblue;
            height: 30px;
            width: 95%;
        }
    </style>
</head>

<body>
    <div style="margin: auto;width: 95%;" id="container">
        <div></div>
        <div id="header">
            <ul id="menu">
                <li>Home</li>
                <li>Events</li>
                <li>About</li>
                <li>Contect us</li>
            </ul>
        </div>
        <div id="boxcontainer">

            <div class="box">
                <div class="boxhead">
                    <p>Events<p>
                </div>
            </div>

            <div class="box">
                <div class="boxhead">
                    <p>Become a Sponser</p>
                </div>
            </div>

            <div class="box">
                <div class="boxhead">
                    <p>Gallery</p>
                </div>
            </div>

        </div>
        <div id="footer">
            <p style="text-align:center">Copyright © 2015  All rights reserved | Privacy Policy | Terms and Conditions | Email: @gmail.com</p>
        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

8 个答案:

答案 0 :(得分：1)

使用clear:both

清除页脚的浮动 

<!doctype html>
<html>

<head>
  <style>
    div#header {
      margin-left: 1%;
      background-color: lightblue;
      height: 30px;
      width: 95%;
    }
    ul#menu li {
      margin: 10px;
      color: black;
      font-size: 25px;
      display: inline;
      margin-top: 100px;
    }
    ul#menu li:hover {
      color: white
    }
    div.box {
      background-color: lightblue;
      height: 200px;
      width: 200px;
      float: left;
      margin: 10px;
      width: 30.3%;
    }
    div.boxhead {
      background-color: yellow;
      height: 30px;
      padding: 0px;
      width: 100%;
    }
    div.boxhead p {
      font-size: 150%;
      text-align: center;
      color: lightblue;
      height: 30px;
      width: 200px;
      padding: 0px;
      -webkit-margin-before: 0.0em;
      -webkit-margin-after: 0.0em;
    }
    div#footer {
      clear: both;
      margin-left: 1%;
      background-color: lightblue;
      height: 30px;
      width: 95%;
    }
  </style>
</head>

<body>
  <div style="margin: auto;width: 95%;" id="container">
    <div></div>
    <div id="header">
      <ul id="menu">
        <li>Home</li>
        <li>Events</li>
        <li>About</li>
        <li>Contect us</li>
      </ul>
    </div>
    <div id="boxcontainer">

      <div class="box">
        <div class="boxhead">
          <p>Events
            <p>
        </div>
      </div>

      <div class="box">
        <div class="boxhead">
          <p>Become a Sponser</p>
        </div>
      </div>

      <div class="box">
        <div class="boxhead">
          <p>Gallery</p>
        </div>
      </div>

    </div>
    <div id="footer">
      <p style="text-align:center">Copyright © 2015 All rights reserved | Privacy Policy | Terms and Conditions | Email: @gmail.com</p>
    </div>
  </div>
</body>

</html>

答案 1 :(得分：1)

您可以为页脚添加此代码：clear:both 

 div#footer {
    margin-left: 1%;
    background-color: lightblue;
    height: 30px;
    width: 95%;
    clear: both;
}

有关详情，请参阅此链接：https://jsfiddle.net/

感谢

答案 2 :(得分：1)

  

在child上使用float时始终设置父元素的布局   元件。

您还没有在代码中设置父元素的布局。 设置布局有很多种方法。您可以使用overflow: hidden，即：

#boxcontainer {
  overflow: hidden;
}

或者您也可以使用:after伪元素：

#boxcontainer:after {
  display: block;
  content: '';
  clear: both;
}

＆＃13;
＆＃13; 
div#header {margin-left:1%;background-color:lightblue;height:30px;width:95%;}
ul#menu li {margin:10px;color:black;font-size:25px;display:inline;margin-top:100px;}
ul#menu li:hover{color:white}
div.box { background-color:lightblue;height:200px;width:200px;float:left;margin:10px;width:35%;}
div.boxhead {background-color:yellow;height:30px;padding:0px;width:100%;}
div.boxhead p {font-size:150%;text-align:center;color:lightblue;height:30px;width:200px;padding:0px;-webkit-margin-before: 0.0em;-webkit-margin-after:0.0em;}
div#footer {margin-left:1%;background-color:lightblue;width:95%;}

#boxcontainer {overflow: hidden;}
＆＃13; 
<div style="margin: auto;width: 95%;"id="container">
  <div></div>
  <div id="header">
    <ul id="menu">
      <li>Home</li>
      <li>Events</li>
      <li>About</li>
      <li>Contect us</li>
    </ul>
  </div>
  <div id="boxcontainer">

    <div class="box">
      <div class="boxhead">
        <p>Events<p>
      </div>
    </div>

    <div class="box">
      <div class="boxhead">
        <p>Become a Sponser</p>
      </div>
    </div>

    <div class="box">
      <div class="boxhead">
        <p>Gallery</p>
      </div>
    </div>

  </div>
  <div id="footer">
    <p style="text-align:center">Copyright © 2015  All rights reserved | Privacy Policy | Terms and Conditions | Email: @gmail.com</p>
  </div>
		</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

请尝试使用标记<div>。

，而不是使用<footer>

<强> HTML 

<footer class="footer">
    <p>Your content</p>
</footer>

<强> CSS 

.footer{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    text-align: center;
}

答案 4 :(得分：1)

以下是针对您案例的两种解决方案：

  1. 删除页脚 div

    的浮动 
    _xmpp-client

    2. 或

    2.将帮助程序类#footer { float:none; } 添加到页脚 div：

    clearfix

    使用以下样式，这将清除浮动

    <div id="footer" class="clearfix">

答案 5 :(得分：1)

将.clearfix类添加到float元素的父级：

<div id="boxcontainer" class="clearfix">...</div>

.clearfix的CSS：

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

另外，我认为你的页脚不需要固定高度。因此，请从页脚div中删除height: 30px;。

<!doctype html>
<html>
<head>
    <style>
        div#header {
            margin-left: 1%;
            background-color: lightblue;
            height: 30px;
            width: 95%;
        }

        ul#menu li {
            margin: 10px;
            color: black;
            font-size: 25px;
            display: inline;
            margin-top: 100px;
        }

            ul#menu li:hover {
                color: white;
            }

        div.box {
            background-color: lightblue;
            height: 200px;
            width: 200px;
            float: left;
            margin: 10px;
            width: 30.3%;
        }

        div.boxhead {
            background-color: yellow;
            height: 30px;
            padding: 0px;
            width: 100%;
        }

            div.boxhead p {
                font-size: 150%;
                text-align: center;
                color: lightblue;
                height: 30px;
                width: 200px;
                padding: 0px;
                -webkit-margin-before: 0.0em;
                -webkit-margin-after: 0.0em;
            }

        .clearfix:before,
        .clearfix:after {
            content: " ";
            display: table;
         }

         .clearfix:after {
             clear: both;
         }

        div#footer {
            margin-left: 1%;
            background-color: lightblue;
            width: 95%;
        }
    </style>
</head>

<body>
    <div style="margin: auto;width: 95%;" id="container">
        <div></div>
        <div id="header">
            <ul id="menu">
                <li>Home</li>
                <li>Events</li>
                <li>About</li>
                <li>Contect us</li>
            </ul>
        </div>
        <div id="boxcontainer" class="clearfix">

            <div class="box">
                <div class="boxhead">
                    <p>Events<p>
                </div>
            </div>

            <div class="box">
                <div class="boxhead">
                    <p>Become a Sponser</p>
                </div>
            </div>

            <div class="box">
                <div class="boxhead">
                    <p>Gallery</p>
                </div>
            </div>

        </div>
        <div id="footer">
            <p style="text-align:center">Copyright © 2015  All rights reserved | Privacy Policy | Terms and Conditions | Email: @gmail.com</p>
        </div>
    </div>
</body>
</html>

答案 6 :(得分：0)

只需从页脚中删除height: 30px并添加float: left; 

div#footer {
    margin-left: 1%;
    background-color: lightblue;
    width: 95%;
    float: left;
}

答案 7 :(得分：0)

首先您需要设置页脚样式

#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;   /* Height of the footer */
background:#6cf;
}

然后你打电话

<div id="footer">footer</div>
相关问题
最新问题