页脚停留在<div>的右侧 - 网页学习体会

问题描述：

I'm learning HTML/CSS/PHP and building a website from scratch in my spare time.

The footer in the following code stays at the bottom where I want it unless I use the content <div>, then it shoots to the right of the content.

I can't figure out why?! I've commented out the float: left and that doesn't make a difference.

Thanks for your help.

style.css:

html {
font-family: sans-serif;
}

.wrap {
min-width: 600px;
width: 85%;
margin: auto;
float: left;
}

.navigation {
padding: 5px;
background: black;
text-align: center;
}

.navigation li {
display: inline;
padding-right: 10px;

}

.navigation a {
text-decoration: none;
color: white;
font-size: 20;
font-family: fantasy;

}

.navigation a:hover {
text-decoration: underline;

}

.content {
background: #f8f8f8;
float: left; 
width: 80%;
}


header {
text-align: center;
margin: auto;
}

header a {
text-decoration: none;
color: black;
}

h5 {
font-size: 120px;
font-family: cursive;
font-variant: small-caps;
margin-top: 10px;
margin-bottom: -100px;
text-shadow: 2px 1px 3px gray; 

 }

h6 {
font-size: 32px;
}

p {
padding-bottom: 10px;
}

header.php:

<html>

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <title></title>
</head>

<body>

<div class="wrap">

<header>
    <a href="/index.php"><img src = "/images/banner_logo.jpg"></a>

</header>


<div class="navigation">
    <ul>
        <li><a href="/index.php">Home</a></li>
        <!--<li><a href="/blog/index.php">Blog</a></li>-->
        <li><a href="/pics/index.PHP">Pics</a></li>
        <li><a href="/contact/index.php">Contact</a></li>
        <li><a href="/about/index.php">About</a></li>
        <li><a href="/produce/index.php">Produce</a></li>
    </ul>
</div>

footer.php:

<!--begin footer -->


<br><small>Copyright 2015</small>

</div>
</body>
</html>

index.php (with content):

<?php include "header.php"; ?>

<!--begin page content-->

    <h2>Welcome</h2>
    <div class="content">
        <p>Wander around and see if I've figured out what to do here.</p>


            <h4>Would you like to tell me you are here?</h4>
            <form action="process.php" method="post"> 

            First Name: <input name="fname" type="text" /> 
            <input type="submit" />
            </form> 




    </div>  
    <br>

答

Because clearing divs is a common problem that you will run across frequently, you will likely want to create a utility class.

.clearfix:after {
    clear: both;
   content: " ";
   display: block;
   font-size: 0;
   height: 0;
   visibility: hidden;
}
.clearfix {
   display: block;
}
.clearfix {
   display: inline-block;
}

Apply it to the div directly, or sometimes, you'll find that you want to toss it in a div at the end of your oddly floating clear.

<div class="clearfix"></div>

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

答

you need to apply a clearing to the footer, since your .content element is floated. The easy way is to wrap your footer content with a meaningful tag (e.g. <footer>) and then give this style

footer {
  clear: both;
}

A better refined way is to use the .clearfix class as used in the html5 boilerplate applied directly to the .content element, e.g.

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

.content:after {
    clear: both;
}

答

Commenting out the float: left in the .content section of the CSS does indeed force the footer onto the next line. See: http://jsfiddle.net/Lu7w03mh/1/.

页脚停留在的右侧

相关推荐

页脚停留在
的右侧