Question

我有一个这样的页面：

<html>
<head>
<style type="text/css">
  #mainDiv{
  height: 100%;
  }

  #myDiv{
  overflow: auto;
  width: 400px;
  }
</style>
</head>
<body>
  <div id="mainDiv">
  <div id="myDiv">content</div>
  </div>
</body>
</html>

我希望mainDiv完全包含在屏幕中（没有滚动条）。此div包含myDiv和myDiv高度取决于屏幕高度，使其底部边框与屏幕底部（或mainDiv底部）的边距为30px。我该怎么办？

Answer 1

#mainDiv {
   width: 100%;
   height: 100%;
}
#mydiv {
  width: 100%;
  height: 100%;
  margin-bottom: 30px;
}

HTML

   <div id="mainDiv">
       <div id="mydiv">content</div>
  </div>

Answer 2

你可以尝试：

#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }

#mainDiv的填充应该提供您在#mydiv上希望的有效余量。

为确保没有滚动条，您可能还需要从body删除填充等。

Answer 3

像@Johno建议的解决方案应该是

#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }

但是当你尝试这个解决方案时，你得到一个滚动条，因为内容高度大于窗口的高度。

你得到这个是因为我认为边距被添加到内容的高度（即100％）。所以规则评估的顺序是：

将内容高度设置为100％
将30 px的边框添加到当前高度。

我尝试为内容设置固定高度，即窗口高度减去30像素，我得到了正确的结果。

固定底部保证金

3 个答案: