html - CSS调整高度/宽度/文本

Question

我刚刚有一个关于具有调整大小的动态网页的快速问题。截至目前，我有这个 jsfiddle。我已经在“像素”中设置了最小宽度/高度要求，但我不确定这是否是执行此操作的方法。我已经设置了每个 div 的最小宽度/高度要求，并将它们的宽度/高度设置为自动。我不确定为什么容器内的内部元素即使设置为自动也不会缩放其宽度。另外，如果我的 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;
}

我已经提供了我正在尝试实现的布局的 imgur 链接...

http://imgur.com/dSilHV1

注意 - 我尝试在容器上使用 min-width: 100%, min-height: 100% 并以 % 的形式设置各个组件的宽度/高度，但显示不正确。如果需要，我可以提供一个 jsfiddle。

Answer 1

如果要在元素高度中使用百分比，还必须为 html 和 body 元素提供高度属性，如下所示:

 html, body{height:100%} 

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

在您的 jsfiddle 中，您已将“secondDiv”的宽度设置为 80%。在该元素内有宽度为 80% 的“secondTopDiv”。这个大小是相对于元素的父元素的，所以“secondTopDiv”只是它最接近的父元素大小的 80%。如果您希望它们大小相同，请将“secondTopDiv”宽度设置为 100%。对其他子元素执行相同的操作。

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