Question

我的页脚和页面内容遇到了很多麻烦，我正在尝试找到正确的方法来执行此操作。我的页脚位于页面底部，但是当我添加内容时，它会溢出容器，请帮帮我。

CSS：

#container { 
    width: 75%;
    height:100%;
    margin:0 auto;
    background-color:black;
    margin-top:10px;
    margin-bottom:10px;
    padding:10px;
    opacity:0.8;

#content { 
    width:100%;
}

footer {
    text-align: center;
    clear: both;
    color: #B05510;
    width: 75%;
    height: 115px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

<body>
<div id='container'>


    <?php
            include 'navfoot/navbar.php'
            ?>
        <div id='content'>
            <div id='paragraph'>
                <p>Eventually our website will be advanced enough for us to have a news feed! But until then we suck!</p>
            </div>
        </div>
    <?php
            include 'navfoot/footer.php'
            ?>
</div>

Answer 1

您的容器和页脚设置为75％宽度，内容设置为100％宽度。这可能就是它越过容器/页脚的原因。这取决于订单。页脚上的绝对定位可能会导致它。你可以尝试改为亲戚。

请将您想要实现的内容以及HTML的模型发布到您现在所拥有的内容中。

如果您使用的是PHP，我们需要查看它们是什么。许多可能导致内容中断的变量。

如果在调整浏览器大小时出现问题，那是因为段落ID（#paragraph）的固定宽度为500px，其他所有内容都是百分比。

固定在页脚上将无法解析在其上方流动的文本。

Answer 2

这取决于您希望页脚如何操作（始终固定在底部或相对于内容）。但从它的声音来看，尝试将此添加到您的页脚CSS：

footer {
    background-color: black;
    position: fixed;
}

这将使其保持固定并位于页面底部（至少在Chrome中）。否则，请创建位置：页脚的相对位置，然后将其下沉到内容的底部。

页面不会随内容扩展

2 个答案: