Question

HTML：

<body>
    <div id="page-body">
        <div class="footer"></div>
    </div>
</body>

CSS：

body {
    height: 100%;
    width: 100%;
}
.footer {
    left: 0;
    bottom: 0em;
    float: left;
    width: 100%;
    height: 3em;
    background-color: #9FC5C9;
}
#page-body {
    min-width: 800px;
    position: relative;
    left: 0;
    margin-top: 7%;
    top: 7%;
    width: 100%;
    height: 10em;
    background-color: #456;
}

http://jsfiddle.net/trbd1dhL/

看一下上面的链接。 <div>不会粘在窗口左侧。它有一些缩进。有时父母会向左侧弯曲，但孩子会缩进。甚至底层财产也不起作用。如何解决这个问题？

Answer 1

这是html和body元素的默认浏览器填充/边距。只需将它们设置为0：

即可

html, body {
    margin: 0;
    padding: 0;
}

http://jsfiddle.net/trbd1dhL/2/

Answer 2

你的CSS中有很多东西没有效果。例如，您的页脚类设置了左侧和底部属性，但没有位置属性。您需要指定position：absolute，假设您希望页脚附加到页面底部。

此外，您的身体高度为100％，但您尚未指定html元素的高度。使用百分比高度时，应用百分比高度的元素的父级必须具有指定的高度。

请改为尝试：

html, body {
    height:100%;
    padding:0;
    margin:0;
}
#page-body {
    background-color:#456;
    height: 100%;
}
.footer {
    position: absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3em;
    background-color:#9FC5C9;
}

<div id="page-body">
    <div class="footer"></div>
</div>

Answer 3

这是由于浏览器默认的css。你可以在身体上设置填充。

body {
    padding: 0;
}

绝对div内的相对div不坚持左。底部和左侧属性不起作用

3 个答案: