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来做你正在问的问题。以下是解释网格系统如何工作的文档的链接。

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

我希望这对你有用。

Answer 2

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

固定div到流体div

2 个答案: