zoukankan      html  css  js  c++  java
  • html头部和底部固定时,中间的内容随屏幕分别率铺满页面

    html页面头部和底部有东西时,怎么让内容填充到中间的页面,且去适应不同的电脑分辨率,看代码

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <style type="text/css">
     7             html, body {
     8                 height: 100%;
     9                 margin: 0px;
    10                 padding: 0px;
    11             }
    12             #main {
    13                 background-color: #999;
    14                 height: 100%;
    15             }
    16             #nav {
    17                 background-color: #008000;
    18                 width: 100%;
    19                 height: 50px;
    20             }
    21             #content {
    22                 background-color: #cc85d9;
    23                 width: 100%;
    24                 position: absolute;
    25                 top: 50px;
    26                 bottom: 50px;
    27                 left: 0px;
    28             }
    29             #content div{
    30                 height: 100%;
    31                 overflow: hidden;
    32                 overflow: scroll;
    33             }
    34             #footer{
    35                 position: absolute;
    36                 bottom:0;
    37                 left: 0;
    38                 width: 100%;
    39                 height: 50px;
    40                 background: #c00;
    41                 color: #fff;
    42             }
    43         </style>
    44     </head>
    45     <body>
    46         <div id="main">
    47             <div id="nav">nav</div>
    48             <div id="content">
    49                 <div>
    50                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    51                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    52                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    53                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    54                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    55                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    56                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    57                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    58                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    59                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    60                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    61                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    62                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    63                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    64                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    65                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    66                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    67                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    68                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    69                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    70                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    71                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    72                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    73                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    74                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    75                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    76                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    77                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    78                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    79                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    80                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    81                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    82                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    83                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    84                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    85                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    86                     <p>的萨摩打什么打算打算开大声哭到拉萨的开始</p>
    87                 </div>
    88                 
    89             </div>
    90             <div id="footer">footer</div>
    91         </div>
    92     </body>
    93 
    94 </html>
  • 相关阅读:
    vue select 动态绑定下拉框-设置默认值
    .NetCore3.1 DESEncrypt加密解密、MD5加密
    .NetCore3.1跨域配置
    vs2019运行代码遇到:HTTP Error 500.19
    查找慢的Sql语句
    Sql Server有主外键关系时添加、删除数据
    SQL Server缺失索引及创建
    SQL Server 一些常用操作
    使用SQL Server DMV调整索引策略
    Aspose.Words 将word2中的内容插入到word1中的指定位置
  • 原文地址:https://www.cnblogs.com/xinheng/p/9479511.html
Copyright © 2011-2022 走看看