Question

我需要建立一个简单的CSS网站。但我的固定页脚有问题。它落在我的按钮上。我试过把它变成一个内联块元素。然后它保持在按钮下方。但是当我调整页面大小时，它会超过我的brandstory课程。有什么方法可以解决这个问题吗？我是CSS的新手。

＆＃13;

.main-navigation li{
    display: inline-block;
    margin: 0.1% 1%;
    padding: 0%;
}

a{
    color: white;
    text-decoration: none;
}

.current{
    text-decoration: underline;
}

.brandstory{
    position: absolute;
    margin-right: 25%;
    height: 500px;
}

img{
    width: 25%;
    margin-left: 75%;
    display: block;
}

.item-of-the-month{
    color: black;
}

.text-block{
    margin-left: 75%;
    border: 1px solid black;
    margin-top: 0%;
    padding-top: 1%;
    padding-bottom: 1%;
    background: white;
    text-align: center;
}

.buttons{
    margin-left: 75%;
}

.button{
    background-color: #000;
    border: 1px solid red;
    margin-top: -1.2%;
    padding: 1%;
    color: white;
    font-family: Georgia,Times,Times New Roman,serif;  
    text-align: center;
    text-decoration: none;
    display: block;
}

.ForwardFashion{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: left;
}

＆＃13;

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <title>ForwardFashion</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    
    <body>
        <div class="header">
            <h1>ForwardFashion</h1>
        </div>
        
        <div class="main-navigation">

                <li><a href="#" class="current"><h3>Home</h3></a></li>
                <li><a href="#"><h3>Interviews</h3></a></li>
                <li><a href="#"><h3>Webshop</h3></a></li>
        </div>
        
    <div class="brandstory">
        <p>ForwardFashion is sinds 2018 de place to be, als het gaat om upcoming fashionhypes. ForwardFashion biedt naast fashionnieuws ook de allerhipste fashionitems aan. Daarnaast interviewen designers en influencers met een forward-kijk op fashion. ForwardFashion is niet voor niets Forward. Waar andere fashionsites in het verleden blijven hangen, kijken wij verder. Wij schuwen niet voor mode met technologie. Dat zou jij ook niet moeten doen! Dus waar wacht je op, kijk rond in onze webshop, ga lekker zitten voor een interview en blijf op de hoogte in ForwardFashionland.</p>
    </div>
        
    <div class="container">
        <img src="images/glassboots.jpg"> 
        <div class="text-block">
            <a href="#" class="item-of-the-month"><h4>Item of the Month</h4></a>
        </div>
    </div>
        
        <div class="buttons">
             <a href="#" class="button">Instagram</a>
             <a href="#" class="button">Youtube</a>
             <a href="#" class="button">Pinterest</a>
             <a href="#" class="button">Twitter</a>
        </div> 
        
    <footer class="ForwardFashion">
        <p>&copy; ForwardFashion</p>
    </footer> 
        
   </body>
</html>

＆＃13;

Answer 1

当您修改页脚时需要考虑的一件事是，您必须在<body>元素中留出一些空间，以便固定页脚获得一些空间以避免它与内容部分重叠。试试这段代码

body {
  padding-bottom: 100px;
}

固定页脚落在内容上

1 个答案: