Question

我的html和body元素没有填充100％的视口，这让我在页脚下面留下了大约200px的空白区域。我和检查员一起试图解决这个问题，但没有什么能正常运作。

值得注意的是，我从顶级菜单（艺术家，关于，历史）激活了3个侧边栏，这些侧边栏也需要100％高度，我觉得这可能与问题有关。< / p>

任何帮助非常感谢，我没有在此处添加任何标记，因为问题非常广泛。

由于

http://workshop.oakdesignstudio.com/dwl/

Answer 1

最简单的方法是给你的身体position: relative;

所以

html{ 
 height: 100%;
} 

body{
 height 100%;
 position: relative;
}

Answer 2

您忘记为页脚标记提供位置值。在行号上添加此代码。 475

footer {
 position:absolute;
}

Answer 3

页面结构非常重要，特别是对于跨浏览器的兼容性。这对你的侧边栏也有帮助;

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

和

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
}
#content {
    padding-bottom:100px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
}

原始来源http://www.cssreset.com/demos/layouts/how-to-keep-footer-at-bottom-of-page-with-css/

亲自尝试，你会感谢布局结构！

html / body 100％高度未填充100％视口

3 个答案: