Question

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

如何将div放在另一个div中的div里面并使它们全部“可调整大小”并适合任何浏览器大小？

2 个答案: