html - 如何将 div 定位在另一个 div 中的 div 中并使它们都“可调整大小”并适合任何浏览器大小？

Question

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

这是我到目前为止所做的，但它并不好。

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

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

顺便说一句，蓝色框架应该代表一个小图像（比如说 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 的宽度和高度以 px 为单位固定。如果您想要所需的行为，请确保所有内容都在 %s 中。

我已经修改了您的 CSS 以使所有内容都在 %s 中。请测试，看看它是否工作正常。它在小提琴上。

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%;
}

Answer 2

使用这个 CSS。你的绿色 div 现在也可见

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

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


.upper{
    background:orange;
}

.lower{
    background: green;
    height: 100%;
}

.frame{
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  top:30px;
  background: #f6f6f6;
  position: relative;
  border-radius:3px;
    overflow: hidden;
}

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