1、如何实现页面的宽高自适应浏览器的变化，且有一个最小宽和高
3 <head>
4 <meta charset = "utf-8">
5 <title>个人任务管理系统</title> <style> body {width: 100%; height 100%; min-width: 800px; min-height: 500px;} header {height: 50px;} #container {min-height: 450px; position: absolute; top: 50px; bottom: 0;} #right {min-width: 800px; width 100%; height: 100%; float: left; padding-left: 400px; box-sizing: border-box; } #left {width: 400px; height 100%; flaot: left; box-sizing: border-box; margin-left: -100%;} </style>
6 </head>
7 <body>
8
9 <header>
10 header
11 </header>
12
13 <div id="container">
14 <div id="right">right</div>
15 <div id="left">left</div>
16 </div>
17
18 </body>
19 </html>
难点一：就是header部分是固定高度，如果不是固定高度，可采用百分比，实现过程就这么复杂了。采用百分比的问题是当浏览器很高时，header部分也太高了。
难点二：container部分采用绝对布局方式空出了header占用的空间，这时他的高度想要跟随浏览器的高度，不能采用百分比的方法了，因为你不知道该值是多少，这里巧妙地采用了bottom的值为0的技巧，使得container的高度充满了浏览器，同时要设置好最低高度。要不然，但浏览器高度过低时，底部布局出现问题。
难点三：left和right部分的布局看起来是常见的一列固定(left)，一列自适应(right)的布局。但是这里他们的父元素，也就是它们的包含块没有确定的宽度值。这里的解决办法是采用了margin为负值的技巧，并且要设置right部分的最小宽度值。要不然，但浏览器变窄时，右边会留空白，出问题。
时间： 2024-10-12 01:02:43