当前位置：首页 → 问答吧 → 自适应宽度高度，至少满屏（瑞星的一道面试题）

自适应宽度高度，至少满屏（瑞星的一道面试题）

时间：2011-05-09

来源：互联网

HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
      * {
          margin: 0;
          padding: 0;
      }
      html, body {
          width: 100%;
          height: 100%;
      }
      #head, #foot {
          width: 100%;
          height: 60px;
          background: #0F9;
      }
      #main {
          width: 100%;
      }
      #left {
          width: 300px;
          float: left;
          background: #CCC;
      }
      #right {
          float: left;
          background: #C69;
      }
    </style>
  </head>
  
  <body>
    <div id="head">head</div>
    <div id="main">
      <div id="left">left</div>
      <div id="right">right</div>
    </div>
    <div id="foot">foot</div>
  </body>
</html>

设计一个页面，头部(head)和尾部(foot)宽100%，高60px，主体部分(main)左侧(left)宽300px，右侧（right)自适应宽度，左右两侧宽度相加刚好100%，main部分高度自适应，至少要满屏，右侧内容超出后高度自适应，且不产生滚动条

这是我在瑞星面试的时候他们给出的一道题，当时没做出来，后来他们教了我，但当时心太乱，有点紧张，一时也没记住，回来时心平气和了，缴尽脑汁也想不出来当时他们是怎么实现的，隐约记得他们用了 html, body {width: 100%; height: 100%;} 其它就再也想不出来了，上面的代码是我自己凭记忆写出来的一点，中间(main)部分我怎么都不会写，望各位高手们指点迷津，谢谢！

作者: missbingxian 发布时间: 2011-05-09

我不会设main、left和right的高度，以及right在内容超出后如何让左侧的高度自适应并且保证不出现滚动条

作者: missbingxian 发布时间: 2011-05-09

我也不会，费老大劲了，也改不到你要的那种效果

作者: lpbottle 发布时间: 2011-05-09