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

【问题标题】：How to position div inside div inside another div and make them all 'resizable' and fit into any browser size?如何将 div 定位在另一个 div 中的 div 中，并使它们都“可调整大小”并适合任何浏览器大小？
【发布时间】：2013-06-27 11:51:29
【问题描述】：

我想做的是制作一个“投资组合”页面。但我希望它“完全适合”用户浏览器的大小（这样，无论用户配备什么大小的屏幕，页面内容始终完全可见）。因此，页面应该是“可调整大小”的，并且在宽屏、台式机、平板电脑或手机上始终显示 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>

【问题讨论】：

请解释.frame 应该如何响应调整窗口大小。现在，.frame 具有固定的宽度和高度。 .frame 的最大高度是多少？它应该适合橙色容器吗？
对不起。是的，.frame 应该适合橙色容器的中心，如果可能的话，它应该根据屏幕大小调整大小。我添加了固定的宽度和高度，因为当我添加百分比时它根本没有显示出来。这同样适用于应该适合白色盒子的蓝色盒子，并且如果可能的话也可以调整大小。比你！
这不是必需的，但如果需要，我希望能够简单地添加更多 .innerframes。因此，例如，如果我添加第 9 个蓝色框，它可以显示在下面的第 3 行，或者如果屏幕很宽，则 9 个蓝色框只能显示在两行中（每行 5 个和 4 个）。
这听起来不错，但我对 Web 开发很陌生，所以我不知道怎么做 :(
假设.innerframe 是250x250 的图像，在大屏幕上，您希望每行的最大图像数是多少？随着屏幕宽度变小，我们是缩小图像还是每行放更少的图像？您需要更加具体，因为可以通过多种方式构建此布局。

标签： html css

【解决方案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%;
}

【讨论】：

当我添加时，%s 蓝框不可见？感谢您的参与！

【解决方案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;
}

【讨论】：

不幸的是，这不是我想要的。另外，我的绿色 div 消失了 :(