固定底边距

我有一个页面是这样的：固定底边距

<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高度取决于屏幕高度，使其底部边框与屏幕底部之间的距离为30px（或底部为mainDiv）。我能做什么？

来源

2012-03-23 supergiox

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

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

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

你得到这个是因为我认为边距被加到了内容的高度（即100％）。因此，评价规则的顺序是：

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

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

来源

2012-03-24 18:44:32 PinoSan

是的，我也想。但我不能在px中使用固定高度，根据我的窗口大小计算。我希望'100％-30px'这样的东西在任何屏幕上都会有一个30px的边框，但不幸的是css不接受这种措施。 – supergiox 2012-03-25 02:43:29

我发现了一个重复的问题。这里你是一个正确的答案。 http://stackoverflow.com/a/485887/680740。我试过了，我想这就是你要找的。 – PinoSan 2012-03-25 11:28:00

我没有找到这个答案，它完美的作品。非常感谢你！ – supergiox 2012-03-25 12:01:50

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

HTML

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

来源

2012-03-23 15:44:26 SMacFadyen

它不工作......用这种方法我没有保证金 – supergiox 2012-03-23 15:52:48

你可以尝试：

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

的#mainDiv的填充应该给，你希望在#mydiv的有效保证金。

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

来源

2012-03-23 15:45:24 Johno

有了这段代码，我在屏幕底部有一个30px的边缘，所以有滚动条...你能再解释一下你的建议吗？？ – supergiox 2012-03-23 15:56:00

回答

相关问题