Question

我想在内容区域和浏览器末尾之间留出一些空间。但是，如果我给元素一个边缘底部它不会工作。以下是问题的图片我认为这是徽标问题＆＃34; bastelecke＆＃34;的网站。也许你们中的某个人有想法解决这个问题。

这是my Page。我希望它没关系，如果我不发布代码，因为你不能看到图片然后。如果您需要密码，请告诉我。

以下是代码：

＆＃13;

*{
    margin: 0px;
    padding: 0px;
    color: black;
}

.header{
    background-image: url(Titel.png);
    width: 840px;
    height: 227.5px;
    background-size: 100%;
    margin-right: auto;
    margin-left: auto;
    
}

body{
    background-image: url(bg.jpg);
    height: 100%;
}

section{
    width: 1230px;
    
    margin-left: auto;
    margin-right: auto;
}

article{
    background-color: #FBB9B7;
    width: 800px;
    
    float: left;
    
    padding: 20px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}

aside{
    background-color: #FBB9B7;
    width: 300px;
    
    float: right;
    
    padding: 20px;
    
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,1);
}

.header-sidebar{
    background: url(schleife.png) no-repeat;
    background-size: 100%;
    height: 44px;
    text-align: center;
    padding-top: 6px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.no-margin-top{
    margin-top: 0px;
}

.face-picture{
    float: left;
    width: 200px;
    height: 200px;
    margin: 0px 10px 5px 0px;
}

.link{
    color: #00AFA8;
    text-decoration: none;
}

.link:hover{
    text-decoration: underline;
}

＆＃13;

<html>
    <head>
        <link href='index.css' rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <div class="header">
        </div>
        
        <section>
            <article>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.                 Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna                         aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur                 sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea                     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero                 eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod                   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit                   amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea                 rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </article>
            
            
            <aside>
                <div class="header-sidebar no-margin-top">
                    Wer bin ich?
                </div>
                <img class="face-picture" src="face.png">
                <p>
                    usto duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt                     ut labore et dolore magna aliquyam erat, sed diam <a href="#" class="link">askasd</a> voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est                     Lorem ipsum dolor sit amet.
                </p>
                
                <div class="header-sidebar">
                    Kategorien
                </div>
                <p>
                    usto duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt                     ut labore et dolore magna aliquyam erat, sed diam <a href="#" class="link">askasd</a> voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est                     Lorem ipsum dolor sit amet.
                </p>
            </aside>
        </section>
    </body>
</html>

＆＃13;

Answer 1

section {
margin-bottom: 20px;
}

section:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

您也可以从height: 100%;代码中删除body，但这不是必需的。

Answer 2

略微改变@chrisbedoay代码，我建议

section {
padding-bottom: 20px;
overflow: auto; <!-- HERE IS THE DIFFERENCE -->
}

/ ===编辑=== /

我刚刚发现你可以为你的身体添加填充物

body{
padding:0px 0px 30px 0x; <!-- allows extra space at bottom of page -->
}

margin-bottom不会工作，背景大小：100％

2 个答案: