将 div 固定为流动 div

Question

我正在尝试创建一个页面，其中页眉为 100% 宽并且在屏幕中占据 20% 的高度，左侧导航栏（20% 宽度）和相邻的主体（80% 宽度）。我也在尝试使页面流畅，以便它在不同尺寸的屏幕上保持比例。

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;*/
}

如何才能使布局具有响应性？

Answer 1

我不确切知道你的用例是什么，但你有没有想过使用像 Twitter Bootstrap 这样的东西？

http://getbootstrap.com/

已经编写了类和 CSS 来满足您的要求。这是解释网格系统如何工作的文档的 link。

http://getbootstrap.com/css/#grid

希望对你有用。

Answer 2

只是想让你知道我通过在 css 中使用 vh 和 vw 而不是 % 或 px 解决了我的问题。一个干净简单的解决方案，适合我的练习目的。

将 div 固定为流动 div

fixed divs to fluid divs

html

css

fluid