Question

我刚才有一个关于动态网页调整大小的快速问题。截至目前，我有这个jsfiddle。我已经在“像素”中设置了最小宽度/高度要求，但我不确定这是否是这样做的方法。我已经设置了每个div的最小宽度/高度要求，并将它们的宽度/高度设置为自动。我不确定为什么容器内的内部元素不会缩放它们的宽度，即使它设置为auto。另外，如果我的div缩小，但是文本变得太大并且重叠，我应该如何缩放行高和文本大小。提前谢谢！

http://jsfiddle.net/27yzo7xb/

代码 -

CSS -

div.container {
    min-height: 1005;
    min-width: 100%;
    background-color: tomato;
}

div.firstDiv {
    width: 10%;
    height:100%;
    float:left;
    background-color: yellow;
    text-align: center;
    line-height: 50px;
}

div.secondDiv {
    width: 80%;
    height: 100%;
    float:left;
    text-align: center;
    background-color: sky-blue;

}

div.secondTopDiv {
    min-width: 80%;
    min-height: 50%;
    background-color: blue;

}

#Content1 {
    width: 100%;
    height: 100%;

}
div.secondBottomDiv {
    min-width: 80%;
    min-height: 50%;
    background-color: orange;
}

div.description {
    width: 100%;
    height: 10%;
    margin: 2px;
    background-color: black;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
}

div.Title {
    width: 100%;
    height: 10%;
    margin: 2px;
    background-color: #00ff00;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
}

div.summary {
   width: 100%;
    height: 30%;
    margin: 2px;
    background-color: pink;
    font-family: "Times New Roman", Times, serif;
    font-size: 1.2rem;
}

我提供了一个我试图实现的布局的简单链接......

http://imgur.com/dSilHV1

注意 - 我尝试在容器上使用min-width：100％，min-height：100％并在％s中设置各个组件的宽度/高度，但它没有正确显示。如果需要，我可以提供一个jsfiddle。

Answer 1

如果要在元素高度中使用百分比，还必须为html和body元素赋予height属性，如下所示：

 html, body{height:100%}

您可以使用viewport height而不是百分比。

在你的jsfiddle中，你已经将“secondDiv”的宽度设置为80％。在该元素内部有“secondTopDiv”，其宽度也为80％。此大小与元素的PARENT相关，因此“secondTopDiv”仅为其最接近父级的80％。如果您希望它们具有相同的大小，请将“secondTopDiv”宽度设置为100％。对其他子元素执行相同操作。

我认为没有办法根据视口大小流畅地缩放字体大小，但您可以使用media queries为不同的屏幕尺寸制作新规则。

CSS调整高度/宽度/文本的大小

1 个答案: