使html页脚占据正文的其余部分_Html_Css_Height_Footer

使html页脚占据正文的其余部分

html css

使html页脚占据正文的其余部分,html,css,height,footer,Html,Css,Height,Footer,所以我试着给我的web应用程序的页脚编码，因为它占据了身体其余部分的高度图片：请注意黑暗区域下方的灯光区域，黑暗区域应占据所有灯光区域我的一些html代码： <body> .... <footer> <hr> <ul id="footerContainer"> <li class="right"> <ul> <li>

所以我试着给我的web应用程序的页脚编码，因为它占据了身体其余部分的高度

图片：

请注意黑暗区域下方的灯光区域，黑暗区域应占据所有灯光区域

我的一些html代码：

<body>
....
<footer>
    <hr>
    <ul id="footerContainer">
        <li class="right">
            <ul>
                <li>
                    <a href="" class="family-filter">Filtro Fami....</a>
                </li>
            </ul>
        </li>
    </ul>
</footer>
<script>...</script>
</body></html>

有什么建议吗

更新1：

这就是发生的事情：当我设置

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

更新2：

缩小并放大此页面：line25.com/wp content/uploads/2010/blog design coded/demo/…并检查页脚区域，这就是我需要它在布局上工作的方式。

这里有一个非常有用的100%高度的演示：

这可以根据您的要求进行调整。

这里有一个非常有用的100%高度演示：

这可以根据您的要求进行调整。

最好的方法是将

html

和

body

元素的背景色设置为页脚的背景色。然后将内容区域的背景色设置为浅灰色

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
#content {
    background-color: silver;
}

最好的方法是将

html

和

body

元素的背景色设置为页脚的背景色。然后将内容区域的背景色设置为浅灰色

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
}
#content {
    background-color: silver;
}

演示：

给出一个元素

高度：100%

意味着它占据了最近的父元素的100% 高度定义。在这种情况下，您不知道页脚的高度，因为内容的高度是可变的

我不知道html结构的其余部分，但您可以将

正文设置为白色背景色，而内容div设置为深灰色。
演示：
给出一个元素高度：100%意味着它占据了最近的父元素的100%
高度定义。在这种情况下，您不知道页脚的高度，因为内容的高度是可变的
我不知道你的html结构的其余部分，但是你可以给正文
一个白色的背景色，而内容部分则是深灰色。
谢谢你的信息，我已经知道了这个。问题是，我不想改变我目前的html代码谢谢你的信息，我已经知道这一点。问题是我不想改变我当前的html代码你是说你想要这个吗？或者重复页脚背景纹理？->将该纹理设置为正文中的background:url（…）
。。。背景仅用于页脚，必须重复其自身，并且不能有固定高度，而是自动高度。在此页面缩小和放大：line25.com/wp content/uploads/2010/blog design coded/demo/…并检查页脚区域，这就是我需要它在我的布局上工作的方式。如果内容高度+页脚高度小于窗口高度怎么办？在我的JSFIDLE中，我给了页脚一个高度，因为我没有你的页脚背景图像，而页脚是空的。这是我能做的最好的了。如果它仍然不是你想要的，我真的不明白你想要什么，那么我放弃：）。或者试试粘脚：你是说你想要这个？或者重复页脚背景纹理？->将该纹理设置为正文中的background:url（…）
。。。背景仅用于页脚，必须重复其自身，并且不能有固定高度，而是自动高度。在此页面缩小和放大：line25.com/wp content/uploads/2010/blog design coded/demo/…并检查页脚区域，这就是我需要它在我的布局上工作的方式。如果内容高度+页脚高度小于窗口高度怎么办？在我的JSFIDLE中，我给了页脚一个高度，因为我没有你的页脚背景图像，而页脚是空的。这是我能做的最好的了。如果它仍然不是你想要的，我真的不明白你想要什么，那么我放弃：）。或者试试粘性页脚：那么你不想让两边的固定按钮都位于页脚顶部以下？请更详细地描述您想要的内容。缩小和缩小此页面：并检查页脚区域，这就是我需要它在布局中工作的方式。忽略侧边按钮，它们在滚动时向下或向上移动。在使用html、body{height:100%}
和页脚高度相同的正常缩放时，页脚会像照片中那样延伸。我想我不明白你想要什么。您的屏幕截图看起来与您发布的示例站点一模一样。如果你还有身高：100%；在页脚上设置，您可以尝试删除它。也许这就是你的问题。我在我的答案中发布的样式应该会给你你想要的。在我网站的截图中，没有缩小。。。这就是它在正常比例下的表现。页脚会随着上面的页面内容占用更多空间而折叠。在页脚和页面正文中添加更多内容，应该可以正常工作。你也可能在某个地方设置了一个高度，这会导致页脚向下延伸太远。所以你不想让两侧的固定按钮低于页脚顶部？请更详细地描述您想要的内容。缩小和缩小此页面：并检查页脚区域，这就是我需要它在布局中工作的方式。忽略侧边按钮，它们在滚动时向下或向上移动。在使用html、body{height:100%}
和页脚高度相同的正常缩放时，页脚会像照片中那样延伸。我想我不明白你想要什么。您的屏幕截图看起来与您发布的示例站点一模一样。如果你还有身高：100%；在页脚上设置，您可以尝试删除它。也许这就是你的问题。我在我的答案中发布的样式应该会给你你想要的。在我网站的截图中，没有缩小。。。这就是它在正常比例下的表现。页脚会随着上面的页面内容占用更多空间而折叠。在页脚和页面正文中添加更多内容，应该可以正常工作。您也可能在某个地方设置了高度，这会导致页脚向下延伸太远。