HTML CSS-页脚-下方空白_Html_Css

HTML CSS-页脚-下方空白

html css

HTML CSS-页脚-下方空白,html,css,Html,Css,我在试图让我的页脚“粘”到所有内容下方的页面底部时遇到问题。我尝试了很多不同的技巧，但都无法在头球上使用要实现这一点，我的布局风格的最佳方式是什么如您所见，边栏和内容div贯穿页脚 <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <

我在试图让我的页脚“粘”到所有内容下方的页面底部时遇到问题。我尝试了很多不同的技巧，但都无法在头球上使用

要实现这一点，我的布局风格的最佳方式是什么

如您所见，边栏和内容div贯穿页脚

<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>


    <header>
        <div id="title_wrapper">
                <h1 id="title_text">Title</h1>
                <p>title</p>
        </div>
    </header>

   <div id="wrapper">

       <div id="content">

            <p>Languages</p>

            <ul>
                 <li>1</li>
                 <li>2</li>
                 <li>3</li>
                 <li>4</li>
                 <li>5</li>

            </ul>

             <p>Frameworks</p>

            <ul>
                 <li>1</li>
                 <li>2</li>

            </ul>

        </div>

        <div id="sidebar">

              Sidebar  
        </div>
    </div>

   <footer>
       Footer

   </footer>

</body>

对页脚使用

position:fixed

而不是

position:absolute

footer {
    background-color: #202020;
    color: white;
    position: fixed;
    width: 100%;
    height: 60px;
    bottom: 0;
}

你似乎有一些奇怪的工作，我不明白

我将您的代码放入JSFIDLE并修复了问题。这就是它的样子：

这些变化是：

删除

页边距：0自动-400px。你为什么需要这个


从#title wrapper
中删除了top:100px
。我还是不明白你为什么需要这个
导致侧边栏滚动的主要问题是侧边栏上的30px
填充。通过将文本移动到侧边栏内的另一个div并对该div应用填充来解决该问题
按照@Pankaj的建议，将页脚的位置更改为fixed是可取的，但是在上述更改之后，您不会注意到任何差异
编辑：实际上，将位置更改为“固定”是不可取的，因为页脚在屏幕上始终可见。完全不要设置position属性，如Fiddle中所示，页脚将始终位于内容下方。您好，请在谷歌上搜索“sticky footer”-有很多不同的方法可以实现此目的。请查看此Fiddle检查我对JSFIDLE（）的回答。删除尾随的1/以查看Declan的原始代码，但是，将position:absolute更改为position:fixed（）。如果您觉得有答案解决了问题，请单击绿色复选标记将其标记为“已接受”。这标志着问题结束，有助于将注意力集中在仍然没有答案的较老的SO问题上。主要问题是侧边栏上的30px填充，这会导致溢出，因为高度也设置为100%。正如我在回答中提到的那样，我解决了这个问题。谢谢你，这很有效！是的，我在试验，有多余的代码，我想我已经注意到边栏div仍然与页脚div重叠，但是页脚仍然在边栏上方，不是吗？你想让页脚在侧边栏下面吗？@DeclanWatt：现在检查答案。不要将“位置”属性设置为“固定”。如果您这样做，它将从正常文档流中删除，即使您继续添加内容，页脚也始终可见。现在，页脚将不会与侧边栏重叠。我感到困惑，因为从代码中可以看出，您希望它像浮动页脚一样留在屏幕上，无论您滚动多少次，它总是在屏幕上
footer {
    background-color: #202020;
    color: white;
    position: fixed;
    width: 100%;
    height: 60px;
    bottom: 0;
}