Css 固定底边_Css_Html_Margin - Fatal编程技术网

Css 固定底边

css html

Css 固定底边,css,html,margin,Css,Html,Margin,我有一个这样的页面： <html> <head> <style type="text/css"> #mainDiv{ height: 100%; } #myDiv{ overflow: auto; width: 400px; } </style> </head> <body> <div id="mainDiv"> <div id="myDiv">content&l

我有一个这样的页面：

<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{
身高：100%；
}
#myDiv{
溢出：自动；
宽度：400px；
}
内容

我希望

mainDiv

完全包含在屏幕中（没有滚动条）。此div包含

myDiv

，并且

myDiv

高度取决于屏幕高度，其底部边框与屏幕底部（或

mainDiv

底部）之间的距离为30像素。我能做什么

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

HTML


内容

您可以尝试：

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

#mainDiv

的填充应该提供您希望在

#mydiv

上获得的有效边距

为了确保没有滚动条，您可能还需要从

正文中删除填充物等。
如@Johno建议的解决方案是
#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }

但是，当您尝试此解决方案时，您会得到一个滚动条，因为内容高度大于窗口高度
你得到这个是因为我认为边距被添加到内容的高度（即100%）。因此，规则评估的顺序是：
将内容高度设置为100%
将30像素的边框添加到当前高度
我试图为内容设置一个固定的高度，即窗口高度减去30 px，我得到了正确的结果。
使用此代码，我在屏幕底部有一个30 px的边距，因此有滚动条。。。你能再给我解释一下你的建议吗？是的，我也这么认为。但是我不能用固定的高度来表示px，它是根据我的窗口大小来计算的。我希望像100%-30px这样的东西在任何屏幕上都会有一个30px的边框，但不幸的是css不接受这种度量。我发现了一个重复的问题。这是你的正确答案。我试过了，我想这就是你要找的。我没有找到这个答案，而且效果很好。非常感谢你！
#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }