css - 最大高度不会缩放网站

Question

我能够缩放我的项目的宽度，但不能缩放高度（在 FireFox 和 Chrome 中尝试过，我知道 IE 不起作用）

这是我正在使用的 CSS：

section.main 
{
 max-height: 100%; 
 max-width: 100%; 
 border: 1px solid black; 
 width: 1000px; 
 height: 800px;
}

Answer 1

好吧，您指定高度为 800 像素。所以你的网站是 800px 高度。

Answer 2

如果您想以 100% 扩展您的网站，您需要添加

section.main
{
  height:100%; width:100%
}

或者

section.main
{
  min-height:100%; min-width:100%
}

http://jsfiddle.net/RQvLF/1/

高度：100%；您需要一个以像素为单位指定高度的周围 div。或者你可以给你的 section.main 一个所需像素的高度。

最大高度：100%；而 max-width:100% 意味着这个 div 的高度和宽度不得大于 100%：

正如你可以说的： max-width:600px;这样你的内部内容就不会超过 600 像素。

Answer 3

确保你有：

html, body
{
width : 100%;
height : 100%;
}

要使 div 具有 % 高度，必须定义父级的高度。

请注意，您的边框会导致问题：该部分将是 100% 高度 + 2px。您可以使用：

section
{
box-sizing : border-box
}