Question

我不是CSS专家，我的页脚有问题。当内容不多时，页脚不在页面的末尾。当我添加一些内容时，一切都很好。当我将“position：absolute”和“bottom：0”添加到css中的页脚并尝试滚动页面时，页脚卡在页面的中心...

图片：

https://i.stack.imgur.com/2XQ9G.jpg
https://i.stack.imgur.com/ldszT.png
https://i.stack.imgur.com/MN65w.png

我的CSS：

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Advent Pro', sans-serif;
    background: url("../images/bg.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 1150px;
}
#socialBar {
    float: left;
    width: 100%;
    background: #282828;
    position: fixed;
}
#socialBarLink {
    float: right;
}
#socialBarLink ul {
    list-style: none;
    margin: 0;
}
#socialBarLink li {
    float: left;
}
#socialBarLink a {
    color: #fff;
    text-decoration: none;
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
}
#socialBarLink a:hover {
    background: #363636;
}
#logo {
    float: left;
    transition: 0.2s;
    margin-top: 65px;
    margin-bottom: 20px;
}
#logo:hover {
    margin-left: 30px;
    opacity: 0.8;
}
#content {
    float: left;
    width: 100%;
    background: #f7f7f7;
    padding-bottom: 20px;
    box-shadow: 0px 0px 4px #272727;
}
#nav {
    float: left;
    width: 100%;
    background: #282828;
    box-shadow: 0px 0px 4px #272727;
}
#nav ul {
    list-style: none;
    margin: 0;
}
#nav li {
    float: left;
}
#nav a {
    float: left;
    color: #FFF;
    text-decoration: none;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 15px;
    padding-right: 15px;
}
#nav a:hover {
    background: #363636;
}
#left {
    float: left;
    width: 65%;
}
#fleft {
    float: left;
    width: 100%;
}
#right {
    float: left;
    width: 35%;
}
.in {
    padding: 8px;
}
#news {
    float: left;
    width: 100%;
    background: #FFF;
    border-bottom-right-radius: 20px;
    margin-top: 10px;
}
#fnews {
    float: fleft;
    width: 100%;
    background: #FFF;
    border-bottom-right-radius: 20px;
    margin-top: 10px;
}
#newsCon {
    padding: 5px;
    float: left;
}
#fnewsCon {
    padding: 5px;
    float: fleft;
}
#title {
    float: left;
    width: 98%;
    padding-left: 2%;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #e9954a;
    color: #FFF;
}
#date {
    width: 97%;
    padding-top: 2%;
    padding-right: 3%;
    padding-bottom: 2%;
    text-align: right;
    font-weight: bold;
}
#subHead {
    float: left;
    width: 98%;
    padding-left: 2%;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #e9954a;
    color: #FFF;
}
#rightCon {
    float: left;
    width: 96%;
    padding: 2%;
    background: #FFF;
}
#footer {  
    float: left;
    width: 100%;
    background: #282828;
    padding-top: 12px;
    padding-bottom: 12px;
    color: #FFF;
    margin-top: 150px;
}
#footR {
    float: right;
}

我的完整HTML：

    <!DOCTYPE html>
<html>
<head>
    <title>Minecraft - Serwer najlepszej jakości!</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="shortcut icon" type="image/ico" href="images/fav.ico"/>
    <link href='http://fonts.googleapis.com/css?family=Advent+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="fb-root"></div>
<div id="socialBar">
 <div id="wrapper">
  <div id="socialBarLink">
   <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Youtube</a></li>
   </ul>
  </div>
 </div>
</div>
<div id="wrapper">
<div id="logo"><a href="#"><img src="images/logo.png" width="300px"></a></div>
 <div id="nav">
  <ul>
   <li><a href="http://riviamc.pl">Strona główna</a></li>
   <li><a href="http://forum.riviamc.pl">Forum</a></li>
   <li><a href="#">Sklep</a></li>
   <li><a href="http://riviamc.pl/regulamin.php">Regulamin</a></li>
   <li><a href="http://riviamc.pl/bany.php">Bany</a></li>
  </ul>
 </div>
 <div id="content">
  <div id="fleft">
   <div class="in">

   <div id="fnews">
    <div id="title">Prace nad serwerem</div>
    <div id="fnewsCon">
        blablabla
    <div id="date">Dodano: 21/05/2016</div>
    </div>
   </div>
   <div id="fnews">
    <div id="title">Start</div>
    <div id="fnewsCon">
        blablablalbalbalbabl
    <div id="date">Dodano: 21/05/2016</div>
    </div>
   </div>

   </div>
  </div>
  <!--<div id="right">
   <div class="in">
    <div id="subHead">Facebook</div>
    <div id="rightCon">
     <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="385" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/facebook"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div></div>
    </div>
   </div>
  </div>-->
 </div>
</div>
<div id="footer">
<div id="wrapper">
Wszelkie prawa zastrzeżone dla riviamc.pl &copy;2017
<div id="footR">Coded by: jtweb.pl</div>
</div>
</div>
</body>
</html>

Html CSS页脚问题

0 个答案: