css布局--header、footer、左侧菜单、多页签、显示区

<html>
<head>
  <style type="text/css">
      body{
          margin:0px;
          padding:0px;
      }
      #header {
        position:fixed;
        top:0px;
        width:100%;
        height:30px;
        border: solid 1px red;
      }
      #container {
          position: fixed;
          top: 30px;
          bottom: 30px;
          border: solid 1px red;
          width: 100%;
      }
      #footer {
          position: fixed;
          height:30px;
          bottom: 0px;
          border: solid 1px red;
          width: 100%;
      }
      #leftMenu {
          float: left;
          width: 100px;
          height: 100%;
          border: solid 0px red;
      }
      #content {
          position:relative;
          margin-left:100px;
          height: 100%;
          border: solid 0px red;
          background-color:bisque;
          overflow:auto;
      }
      #frame{
          position:absolute;
          top:0px;
          right:0px;
          left:0px;
          right:0px;
          width:100%;
          height:100%;
          border:0px;
      }
      #topTab {
          width: 100px;
          height: 50px;
          border: solid 0px red;          
      }

      #container2 {
          position:absolute;
          top:50px;
          left:0px;
          bottom:1px;
          right:0px;
          border: solid 0px red;
          background-color: aqua;
          overflow: auto;
      }
  </style>
</head>
<body>
    <div id="header">header</div>
    <div id="container">
        <div id="leftMenu">leftMenu</div>
        <div id="content">
            <div id="topTab">tab</div>
            <div id="container2">
                <!--<div style="width:500px;height:500px;border:solid 1px red"></div>-->
                <iframe id="frame" frameborder="no" border="0" src="http://www.sina.com.cn"></iframe>
            </div>
        </div>
    </div>
    <div id="footer">footer</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/henreash/article/details/81109919