Question

所以我一直有这个我以前从未见过的奇怪问题...众所周知，div在一个体内，我们可以使体边缘0和填充0覆盖整个页面的高度和宽度100 ％...问题是，当我试图在体内保留一个div时，整个身体会移动：S ..令我惊讶的是，如果我使用萤火虫并将鼠标悬停在身体上，而不是整个页面。它只比潜水稍大......这里是代码（第一部分是HTML，第二部分是CSS）

HTML：

<!DOCTYPE HTML>
<html>
<head>
  <!-- Styles -->
  <link rel="stylesheet" type="text/css" href="styles/general-style.css"/>
  <link rel="stylesheet" type="text/css" href="styles/css-buttons.css"/>
  <link rel="stylesheet" type="text/css" href="styles/css-colors.css"/>

  <!-- Scripts -->
  <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>

  <script type="text/javascript">
  </script>
</head>
<body>
  <div id="content"></div>
  <div id="footer"> <!-- footer div starts here -->
  </div> <!-- footer div starts here -->
</body>
</html>

CSS：

html{
}

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

#content{
  background: red;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px
  height: 350px
  width:350px
}

#footer{
  margin-left:auto;
  margin-right:auto;
}

#footer-text{
  font-size:xx-small;
  margin-top:30px;
  text-align:center;
}

Answer 1

这是它的工作方式，利润率崩溃。你想做什么？您可以在HTML标记上设置背景颜色，或使用CSS的顶部/左侧属性来定位div。

另请参阅：http://www.w3.org/TR/CSS21/box.html

Answer 2

正如TJHeuvel已经说过的那样，这是一个崩溃的边缘。有两种解决方案：在父元素（在本例中为body）或边框上设置填充。您可以在此处详细了解：http://complexspiral.com/publications/uncollapsing-margins/

Answer 3

HTMl CODE

<!DOCTYPE HTML>
<html>
<head>
  <!-- Styles -->
  <link rel="stylesheet" type="text/css" href="styles/general-style.css"/>
  <link rel="stylesheet" type="text/css" href="styles/css-buttons.css"/>
  <link rel="stylesheet" type="text/css" href="styles/css-colors.css"/>

  <!-- Scripts -->
  <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>

  <script type="text/javascript">
  </script>
</head>
<body>
  <div id="content"></div>
  <div id="footer"> <!-- footer div starts here -->
  </div> <!-- footer div starts here -->
</body>
</html>

CSS

html{
}

body{
  padding: 0;
  margin: 0;
}

#content{
  background: red;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px
  height: 350px
  width:350px
}

#footer{
  margin-left:auto;
  margin-right:auto;
}

#footer-text{
  font-size:xx-small;
  margin-top:30px;
  text-align:center;
}

尝试这个

HTML，body和div有问题

3 个答案: