Question

我用我的页脚忙，但由于某种原因，宽度：100％标签不起作用。屏幕我的意思是：

http://gyazo.com/9c23897cd7b9a74ca55ee9fb977f810c

我的css代码：

/*..Portfolio - Lars Beute..*/
body{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}
header {
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
a{
    text-decoration: none;
    color: inherit;
}
nav ul{
    background-color: #42a286;
    overflow: hidden;
    color: white;
    padding: 0;
    text-align: center;
    margin: 0;
}
nav ul li{
    display: inline-block;
    padding: 20px;
}
nav ul li:hover{
    background-color: #399077;
    border-bottom: 3px solid white;
}
section {
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
}
.current{
    border-bottom: 3px solid white;
}
#intro{
    text-align: center;
    background-color: #E6E6E6;
    width: 100%;
}
#intro h1{
    font-size: 50px;
}
#intro em{
    opacity: 0.4;
}
#box1 {
    width: 100%;
    height: 300px;
    background-color: #1A1A1A;
    max-width: 100%;
    max-height: 100%;
    color: white;
    text-align: center;
    vertical-align: middle;
    line-height: 300px; 

}
#footer1 {
    background: #00795f;
    width: 100%;
    height: 100px;
    color: white;
    text-align: center;
    vertical-align: middle;
    line-height: 100px; 
}

HTML code：

    <!--Portfolio by Lars Beute-->
<!--Copying not allowed under my permission-->
<!--Any questions? Contact me: larsbeute@hotmail.com-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<script type="text/javascript" href="js/main.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />      
</head>
<body>
    <!--Script Button-->
    <script>
    function newDoc() {
    window.location.assign("contact.html")
    }
    </script>
    <!--Style Buttons-->
    <style scoped>

        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            height: 80px;
            width: 200px;
        }

        .button-success {
            background: rgb(28, 184, 65); /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60); /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20); /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221); /* this is a light blue */
        }

    </style>
    <!--NavBar-->

    <nav id="navbar">
    <ul>
        <a href="#"><li>About</li></a>
        <a href="#"><li class="current">Portfolio</li></a>
        <a href="#"><li>Contact</li></a>
    </ul>       
    </nav>  
    <!--Introduction-->
    <section id="intro">
        <b><h1>"The Solution To New Websites!"</h1></b>
        <em>"Young but has a lot of talent."</em><br>
        <em>"Never had seen my website finished this fast!"</em><br>
        <em>"If you don't hire this guy you have to reconsider, amazing!"</em><br><br>
        <button class="button-success pure-button" onclick="newDoc()">GET IN TOUCH <i class="fa fa-sign-in"></i></button>

        </section>
    <!--Text-->
    <section id="showcase">
        <h1>PORTFOLIO</h1>
        <hr>
        <div id="box1">
        <h1>This Portfolio</h1>
        </div><br>
        <div id="text"><br>
        <h1>About this project</h1>
        <em>Date built started: The first of Juli 2015.</em><br>
        <em>Date built finished: -</em><br>
        <em>Owned by: Lars Beute</em><br>
        <em>Link: <a href="index.html">linkhere.com</a></em><br>
        <p>This is one of my firsts real sites I made.<br>
        It has a simple layout, and as less code as possible which
        makes it very easy to read, saying this I hope you think this too.<br>
        It is built fully by me, and owned fully by me.<br>
        The site is meant to showcase my portfolio and to let people contact me.<br></p>
        </div>
        <hr>
        <div id="box1">
        <h1>Trialer.co.uk</h1>
        </div><br>
        <div id="text"><br>
        <h1>About this project</h1>
        <em>Date built started: Start of May 2015.</em><br>
        <em>Date built finished: The end of Juni 2015.</em><br>
        <em>Owned by: David</em><br>
        <em>Link: <a href="trialer.co.uk">trialer.co.uk</a></em><br>
        <p>My second real creation.<br>
        The main goal was to make it look very easy to understand and user-friendly.<br>
        I think I did a good job on that, and my customer thinks that either.<br>
        The site is meant to advertise trials people can get.<br></p>
        </div>
    </section>  
    <!--Footer-->
    <section id="footer">
    <footer>
    <div id="footer1">
    &copy; Lars Beute - 2015 - Linkhere.com - larsbeute@hotmail.com
    </div>
    </footer>
    </section>
</body>
</html>

我希望页脚完全位于页面底部。

非常感谢！

Answer 1

因为你把它包裹在你有css做这个的部分

section {
   line-height: 1.5em;
   font-size: 0.9em;
   padding: 40px;
   width: 75%;  <<< specifically this right here
   margin: 0 auto;
}

你不能在部分中将它（交换为div），或挂钩到自定义ID并使其宽度为100％。我建议只使用<footer>。

Answer 2

这是因为您的页脚位于<section>标记内，其中包含width:75%和padding:40px。

相反，这样做：

<footer id="footer">
  <!-- code -->
</footer>

JSFiddle

请务必从<section>标记周围删除<footer>标记。

原因是不起作用是因为你已完成100%的父元素section。所以它是100%的{{1}}。

为什么宽度：100％不在这里工作？

2 个答案: