fixed divs to fluid div

我试图创建一个页面，其中标题为100％宽，占用左侧导航栏（宽度为20％）和邻近主体（占80％）的屏幕高度的20％宽度）。我也在努力让页面变得流畅，以便在不同大小的屏幕上保持它的比例。fixed divs to fluid div

html 

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 

    <div class="header"> 


    </div> 

    <div class="left"> 

    </div> 

    <div class="main"> 

    </div> 

</body> 

</html>

CSS（有固定属性注释掉）

#header{ 
    height:20%; 
    width:100%; 
    background-color: #3B3738; 
    /*min-height:80px; 
    min-width: 100%;*/ 
} 

#left{ 
    height:80%; 
    width:20%; 
    background-color: #848484; 
    /*min-height:550px; 
    min-width:20%; 
    position: relative; 
    float:left;*/ 
} 

#main{ 
    height:80%; 
    width:80%; 
    background-color: #FDF3E7; 
    /*min-height:550px; 
    min-width:80%; 
    position: relative; 
    float:left;*/ 
}

我怎样才能使这样的布局响应？

来源

2015-04-07 user3019558

查看CSS媒体查询...您寻求的答案可能很长，但 – ochi

您已经完成了所有宽度，因此它将根据窗口大小进行调整。如果您希望网站具有响应性，那么无论屏幕大小如何，您都不希望它保持相同的比例 - 这有点矛盾。您是否希望它在响应宽度调整布局（例如最小化菜单或将其设置为一个列布局）之前将折射率维持在一定的分辨率以下？ – wunth