html - 如何将 div 放置在另一个 div 中的 div 中，并使它们全部为 'resizable' 并适合任何浏览器大小？

Question

我想做的是制作一个“投资组合”页面。但我希望它“完全适合”用户浏览器的大小(这样，无论用户配备的屏幕大小如何，页面内容始终完全可见)。因此，页面应该是“可调整大小”的，并且在宽屏、桌面、平板电脑或手机上始终显示 100% 宽度和 100% 高度……并且根据屏幕的大小，内部 div 应该拉伸(stretch)(或收缩)以适应在浏览器中很好。

这是我目前所做的，但效果不佳。

http://jsfiddle.net/MPQXF/50/

当我调整屏幕的高度或宽度时，白色框架(与八个蓝色框架一起从框架的“上”部分弹出。并且当我更改浏览器的大小时它不会拉伸(stretch)或适合。

顺便说一句，蓝色框应该代表小图像(比如说 250x250)。

<section id="home">
    <div class="upper">
        <div class="frame" align="center">
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
            <div class="innerframe">
            </div>
        </div>
    </div>
    <div class="lower">
    </div>
</section>

Answer 1

您已将某些 div 的宽度指定为百分比，而其中一些 div 的宽度和高度以像素为单位固定。如果您想要期望的行为，请确保一切都在 %s 中。

我已经修改了你的 CSS，使一切都在 %s 中。请测试并查看它是否正常工作。它在 fiddle 上起作用。

html, body{
  margin:0px;
  padding:0px;
  height:100%;
}

section{
    height:50%;
    width:100%;
}

div{
    height:100%;
    width:100%;
}

.upper{
    background:orange;
}

.lower{
    background: green;
}

.frame{
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  top:15%;
  height: 40%;
  background: #f6f6f6;
  position: relative;
  border-radius:3px;
}

.innerframe{
    width:20%;
    background:blue;
    display:inline-block;
    border-radius:3px;
    height:42%;
}