Question

以下是代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link type="text/css" rel="stylesheet" media="all" href="page.css">
    </head>
    <body>
        <div id="header"></div>
        <div id="body"></div>
    </body>
</html>

CSS

body{
    background-color: cyan;
    margin: 0;
    padding: 0;
}

#header{
    width: 100%;
    height: 200px;
    background-color: green;
}

#body{
    width: 100%;
    background-color: blue;
    height: 500px;
    position: relative;
    top: -100px;
}

渲染页面如下所示：

enter image description here

相对定位的div＃体从正常流动中取出，我们可以看到底部的青色体。是否可以修复它，所以身体高度在div＃body结束的地方结束了？

我不能使用margin-top：-100px，因为在真实页面上它打破了Opera中的水平居中。小提琴：http://jsfiddle.net/xfqzqhws/

Answer 1

你能检查这是否适合你

#body{
  width: 100%;
  background-color: blue;
  height: calc(100% - 100px);
  position: absolute;
  margin-top:-100px;

}

使用位置时如何校正高度：相对和负顶部

1 个答案: