html - 网站不适合所有屏幕分辨率-6ren

html - 网站不适合所有屏幕分辨率

转载作者：太空宇宙更新时间：2023-11-04 04:41:29

我的网站——因为我的屏幕尺寸很小——非常适合。

发送给我的电子邮件说我的网站看起来完全不正常，在某些情况下难以导航。

www.rawpaste.com

正如您在这张图片上看到的: http://i.imgur.com/pQuqb6I.png

如何使网站适合所有屏幕尺寸？

这是 CSS: http://rawpaste.com/themes/default/style/root.css

/* ================= Body Styles ================= */
body{
    background:#F4F4F4;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#737F89;}

a{color:#367DB3;}
a:hover{ color:#333;}


/* ================= General ================= */
.wrapper{
    width:980px;
    margin:0px auto;
    padding:50px 0px;}

#main{
    padding-bottom:20px;
    background:#fff url(../img/main-bg.png) repeat-y;
    border-bottom:1px solid #D6D8D8;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow:0px 1px 0px #DFDFDF;}

#sidebar{
    width:188px;
    float:left;
    padding-left:1px;
    padding-right:1px;}

#page{
    width:789px;
    float:right;
    padding-right:1px;
    position:relative;}

.center980{
    margin:0px auto;
    width:980px;}

.content{padding:20px 24px;  line-height:17px;  }


/* ================= Header ================= */
#header{
    height:73px;
    background:url(../img/header-bg.png) no-repeat;}

#header .logo{
    width:190px;
    float:left;
    text-align:center;
    padding:20px 0 0 0;}
#header .logo img:hover{ opacity:0.9;}

#notifications{
    width:430px;
    float:left;
    padding-left:16px;
    padding-top:18px;}
#quickmenu{
    width:150px;
    float:left;
    padding-top:18px;}

.qbutton-left{
    display:block;
    width:42px;
    height:25px;
    float:left;
    background:url(../img/qbutton.png) no-repeat 0px 0px;
    text-align:center;
    position:relative;
    padding-top:11px;}
.qbutton-left:hover{background:url(../img/qbutton.png) no-repeat 0px -36px;}

.qbutton-normal{
    display:block;
    width:42px;
    height:25px;
    float:left;
    background:url(../img/qbutton.png) no-repeat -42px 0px;
    text-align:center;
    position:relative;
    padding-top:11px;}
.qbutton-normal:hover{background:url(../img/qbutton.png) no-repeat -42px -36px;}

.qbutton-right{
    display:block;
    width:43px;
    height:25px;
    float:left;
    background:url(../img/qbutton.png) no-repeat -84px 0px;
    text-align:center;
    position:relative;
    padding-top:11px;}
.qbutton-right:hover{background:url(../img/qbutton.png) no-repeat -84px -36px;}

.qballon{
    background:url(../img/qballon.png) no-repeat;
    width:19px;
    height:21px;
    display:block;
    text-align:center;
    color:#FDEDEC;
    font-size:10px;
    position:absolute;
    top:-12px;
    padding-top:4px;
    right:2px;}

/* ================= Profilebox ================= */
#profilebox{
    width:146px;
    height:46px;
    background:url(../img/profileboxbg.png) no-repeat;
    float:right;
    margin:14px 14px 0 0;
    position:relative;}
#profilebox .display{
    display:block;
    padding:5px 6px;
    font-size:11px;
    color:#A5C6EC;
    line-height:15px;}
#profilebox .display:hover{
    text-decoration:none;}
#profilebox .display img{
    border:0px solid #1D4E76;
    float:left;
    margin-right:7px;}
#profilebox .display b{
    display:block;
    color:#fff;}
#profilebox .display span{
    background:url(../img/arrow-down.png) no-repeat right;
    padding-right:11px;}

#profilebox .display:hover, #profilebox:hover{
    background:url(../img/profileboxbg-hover.png) no-repeat;}

#profilebox:hover .profilemenu, .profilemenu:hover{ display:block;}
.profilemenu{
    display:none;
    background:#3C81B5;
    border:1px solid #1C4D78;
    border-top:none;
    padding-top:3px;
    margin-top:-3px;
    position:relative;
    z-index:1000;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;}
.profilemenu a{
    display:block;
    font-size:11px;
    color:#A5C6EC;
    padding:10px 7px;}
.profilemenu a:hover{
    text-decoration:none;
    color:#fff;
    background:#306997;}

/* ================= Searchbox ================= */
#searchbox{
    display:block;
    background:url(../img/searchbox-bg.png) repeat-x bottom;
    height:65px;}
#searchbox .in{
    padding:15px 0 0 9px;}
#searchbox .input{
    background:url(../img/searchbox.png) no-repeat;
    width:131px;
    border:none;
    font:13px Arial, Helvetica, sans-serif;
    color:#999;
    padding:11px;
    padding-left:30px;}
#searchbox .input-hover{
    background:url(../img/searchbox-hover.png) no-repeat;
    width:131px;
    border:none;
    font:13px Arial, Helvetica, sans-serif;
    color:#666;
    padding:11px;
    padding-left:30px;}
/* ================= Sidemenu ================= */  
#sidemenu{ padding:10px 0px;}
#sidemenu ul{
    font-size:12px;
    line-height:20px;}
#sidemenu li{
    position:relative;}
#sidemenu a{
    display:block;
    color:#596677;
    padding:9px 26px 9px 15px;
    border-top:1px solid #F6F7F9;
    border-bottom:1px solid #F6F7F9;}
#sidemenu a img{
    margin-bottom:-4px;
    margin-right:9px;}
#sidemenu a:hover{
    text-decoration:none;
    background:#EDF1F5;
    color:#3F4C59;
    border-top:1px solid #DCE7F0;
    border-bottom:1px solid #DCE7F0;}
#sidemenu .ballon{
    background:#94B5CF;
    margin-left:6px;
    border-radius:19px;
    font-size:10px;
    font-weight:bold;
    line-height:normal;
    color:#fff;
    position:absolute;
    border:1px solid #739BBF;
    box-shadow:0px 1px 0px #fff;
    right:9px;
    top:11px;
    padding:1px 5px;}
#sidemenu li a:hover .ballon{
    background:#799FC1;
    color:#fff;
    border:1px solid #5384B0;}
#sidemenu .active a{
    background:#fff;
    border-top:1px solid #DFDFDF;
    margin-right:-1px;
    position:relative;
    border-bottom:1px solid #DFDFDF;
    color:#2C71A5;}
#sidemenu .active a .ballon{
    top:10px;
    right:10px;}

/* Submenu */
.submenu{
    padding:0px;
    border-bottom:1px solid #D6D6D6;
    padding-bottom:6px;
    display:none;}
#sidemenu .submenu a{
    padding:5px 12px 5px 40px;
    font-size:11px;}
#sidemenu .submenu img{
    margin-right:8px;}
#sidemenu .submenu .ballon{
    top:7px;}
.submenu .action{
    position:relative;}
.subtitle .action .arrow{
    position:absolute;
    right:10px;
    top:18px;}



/* ================= Stats ================= */
#stats{
    display:none;
    height:65px;
    padding-left:20px;
    background:#FFFADF url(../img/stats-bg.png) repeat-x bottom;}
#stats .column{
    width:150px;
    text-align:center;
    float:left;
    color:#9B936A;
    font-size:11px;
    margin-top:9px;
    padding:2px 0px;
    border-right:1px solid #F0E5BC;}
#stats .column b{
    font-size:22px;
    display:block;
    color:#474643;
    letter-spacing:-0.1px;
    padding-bottom:5px;}
#stats .last{
    border-right:none;}
#stats .column .up{ color:#488D46;}
#stats .column .down{ color:#D73535;}
#stats .close{
    background:url(../img/icons/mini/close-stats.png) no-repeat center;
    width:35px;
    height:35px;
    display:block;
    text-indent:-9999px;
    position:absolute;
    right:0px;
    top:0px;}
#stats .close:hover{
    background:url(../img/icons/mini/close-stats-hover.png) no-repeat center;}
#stats .arrow{
    position:absolute;
    right:186px;
    top:-9px;}


/* ================= Page Title ================= */
.page-title{
    background:url(../img/page-title-minidot.png) repeat-x bottom;
    border-bottom:1px solid #D1D3D3;
    height:63px;}
.page-title .in{
    padding:0px 24px;}
.page-title .titlebar{
    color:#83929F;
    font-size:11px;
    width:480px;
    float:left;
    padding-top:14px;}
.page-title .titlebar h2{
    color:#364656;
    font-size:16px;
    height:24px;}
.page-title .shortcuts-icons{
    width:250px;
    float:right;
    padding-top:19px;}

/* ================= Shortcut ================= */
.shortcut{
    background:url(../img/shortcut-normal.png) no-repeat top left;
    width:25px;
    display:block;
    height:26px;
    float:left;
    margin-left:5px;}
.shortcut:hover{
    background:url(../img/shortcut-hover.png) no-repeat top left;}
.shortcuts-icons a{
    float:right;}


/* ================= Simple Tip ================= */
.simple-tips{
    background:#FFFFCA url(../img/simple-tips-bg.png) repeat-x top;
    border:1px solid #E0DBC2;
    border-radius:3px;
    padding:12px 17px;
    color:#A79955;
    font-size:11px;
    line-height:20px;
    margin:0 0 20px 0;
    position:relative;
    box-shadow:0px 1px 1px #F0F0F0;}
.simple-tips h2{
    display:block;
    color:#6D612E;
    font-size:12px;}
.simple-tips .close{
    background:url(../img/icons/mini/close-stats.png) no-repeat center;
    width:35px;
    height:35px;
    display:block;
    text-indent:-9999px;
    position:absolute;
    right:0px;
    top:0px;}

/* ================= Dashbutton ================= */
.dashbutton-div{
    padding:12px 0px;}
.dashbutton{
    display:block;
    text-align:center;
    width:147px;
    float:left;
    margin-left:-1px;
    margin-bottom:-1px;
    border-radius:1px;
    height:99px;
    font-size:11px;
    color:#7BA5C5;
    padding-top:26px;
    border:1px solid #DCE7F0;
    overflow:hidden;
    background:url(../img/dashbutton-normal.png) repeat-x bottom;}
.dashbutton img{
    margin-bottom:19px;}
.dashbutton b{
    color:#698296;
    display:block;
    font-size:12px;}
.dashbutton:hover{
    background:url(../img/dashbutton-hover.png) repeat-x bottom;
    color:#6798BC;
    border:1px solid #CCDCEA;
    position:relative;}
.dashbutton:hover b{
    color:#4B5F6D;}
.dashbutton:active{
    background:url(../img/dashbutton-active.png) repeat-x top;}


/* ================= Simple Box ================= */
.simplebox{}
.simplebox .titleh{
    border:1px solid #CBDAE8;
    background:url(../img/simplebox-title-bg.png) repeat-x bottom;
    height:40px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    position:relative;}
.simplebox .padding-in{
    padding:10px;
    line-height:18px;}
.simplebox .titleh h3{
    font-size:12px;
    color:#225983;
    padding:13px 0 0 15px;}
.simplebox .shortcuts-icons{
    position:absolute;
    display:block;
    text-align:right;
    right:10px;
    top:8px;}
.simplebox .shortcuts-icons a{
    opacity:0.8;}
.simplebox .body{
    border:1px solid #CBDAE8;
    border-top:none;
    color:#748897;
    box-shadow:0px 1px 0px #eee;
    background:#fff url(../img/simplebox-dot.png) repeat-x top;}
.simplebox .button-box{
    border-top:1px solid #E6EDF4;
    background:#FDFDFD url(../img/simplebox-dot.png) repeat-x top;
    padding:15px 180px;}

/* ================= Simple Title ================= */
.simpletitle{
    font-size:14px;
    color:#215983;
    padding:15px 0px;
    border-bottom:1px solid #CBDAE8;
    position:relative;}
.simpletitle .shortcuts-icons{
    position:absolute;
    display:block;
    text-align:right;
    right:10px;
    top:10px;}

/* ================= Gallery ================= */
.get-photo{
    margin:16px 10px 0 0;
    float:left;
    width:175px;
    font-size:11px;
    font-weight:bold;
    color:#7A899C;
    position:relative;
    height:140px;}
.get-photo img{
    border-radius:1px;}
.get-photo:hover .buttons{
    display:block;}
.get-photo:hover p{color:#53606F;}
.get-photo p{
    padding-top:10px;}
.get-photo .buttons{
    display:none;
    position:absolute;
    top:0;
    right:0;
    padding:5px 4px;}
.mini-delete{
    display:block;
    width:19px;
    height:19px;
    text-indent:-9999px;
    float:right;
    margin-left:3px;
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px 0px;}
.mini-delete:hover{
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -40px;}
.mini-edit{
    display:block;
    width:19px;
    height:19px;
    text-indent:-9999px;
    float:right;
    margin-left:3px;
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -20px;}
.mini-edit:hover{
    background:url(../img/icons/mini/gallery-icon.png) no-repeat 0px -60px;}


/* ================= Error Pages ================= */
.error-page{text-align:center;margin:10px 0;}
.error-page h2{
    font-size:21px;
    line-height:28px;
    padding:14px 0px;}
.error-page .red{ color:#E76463;}
.error-page .blue{ color:#76A6D3;}
.error-page .green{ color:#99C584;}
.error-page p{
    font-size:12px;
    color:#858585;
    line-height:22px;
    padding:24px 0px;
    border-top:1px solid #EDEDED;
    border-bottom:1px solid #EDEDED;}
.error-page .button{
    font-size:14px;
    color:#808080;
    font-weight:bold;
    padding:8px 14px;
    border-radius:3px;
    border:1px solid #C5C5C5;
    border-bottom:1px solid #9D9D9D;
    background:#fff url(../img/error-page-buttonbg.png) repeat-x bottom;}
.error-page .button:hover{
    color:#333;
    box-shadow: 0px 0px 1px #c6c6c6;
    border:1px solid #BCBCBC;
    border-bottom:1px solid #999;}


/* ================= Form Elements ================= */
input, select, textarea{
    background:#fff;
    border:1px solid #D2D4D4;
    border-top:1px solid #A5A6A6;
    border-radius:2px;
    color:#333;
    font:12px Arial, Helvetica, sans-serif;
    padding:7px 6px;}

.st-form-line{
    display:block;
    border-bottom:1px solid #E5E5E5;
    padding:16px 20px;}
.st-labeltext{
    display:block;
    color:#3C5868;
    float:left;
    width:150px;
    line-height:20px;
    font-size:12px;
    padding-top:3px;
    padding-right:10px;}
.st-forminput{
    background:#fff url(../img/st-forminput-bg.png) repeat-x top;
    border:1px solid #D2D4D4;
    border-top:1px solid #A5A6A6;
    border-radius:2px;
    color:#A5A5A5;
    font:12px Arial, Helvetica, sans-serif;
    padding:7px 6px;}
.st-disable{
    background:#fafafa;}
.st-forminput-active{
    background:#fff url(../img/st-forminput-bg.png) repeat-x top;
    border:1px solid #B5B7B7;
    border-top:1px solid #8E8F8F;
    border-radius:2px;
    color:#666666;
    font:12px Arial, Helvetica, sans-serif;
    padding:7px 6px;
    width:auto;}

.datepicker-input{
    background:#fff url(../img/datepicker-bg.png) repeat-x top right;
    border-radius:2px;
    color:#666;
    padding:7px 6px;
    border:1px solid #D2D4D4;
    border-top:1px solid #A5A6A6;
    font:12px Arial, Helvetica, sans-serif;}

.st-button{
    background:url(../img/default-button.png) repeat-x top;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #1A527D;
    border-bottom:1px solid #0F3049;
    border-radius:2px;
    padding:6px 10px;
    margin-right:10px;
    text-shadow: 0px -1px #174B73;}

.st-button:hover{
    border:1px solid #133E5C;
    border-bottom:1px solid #0B2436;}

.st-button:active{box-shadow: inset 0 0 0.5em #174B73;}

.st-clear{
    background:#fff url(../img/error-page-buttonbg.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#818181;
    border:1px solid #C5C5C5;
    border-bottom:1px solid #969696;
    border-radius:2px;
    padding:6px 10px;
    margin-right:10px;}

.st-clear:hover{
    border:1px solid #B1B1B1;
    border-bottom:1px solid #878787;}

.st-clear:active{box-shadow: inset 0 0 0.5em #ccc;}


.st-success-input{
    background:#EAF2EC url(../img/st-forminput-bg.png) repeat-x top;
    border:1px solid #A9CFB0;
    border-top:1px solid #85A38B;
    border-radius:2px;
    color:#55A163;
    font:12px Arial, Helvetica, sans-serif;
    padding:8px 6px;}
.st-form-success{
    color:#437E4C;
    font-size:12px;
    margin-left:10px;}

.st-error-input{
    background:#FBF4F5 url(../img/st-forminput-bg.png) repeat-x top;
    border:1px solid #E2B5BE;
    border-top:1px solid #B28F96;
    border-radius:2px;
    color:#99626B;
    font:12px Arial, Helvetica, sans-serif;
    padding:8px 6px;}
.st-form-error{
    color:#99616B;
    font-size:12px;
    margin-left:10px;}



/* ================= Chart ================= */
.chart{
    background:#EAF0F6;
    padding-bottom:14px;}

/* ================= Tiny Title ================= */
.st-tinytitle{
    padding:7px 0 13px 0;
    border-bottom:1px solid #EBF1F6;
    margin-bottom:20px;}
.st-tinytitle h3{
    color:#727F88;
    padding-bottom:5px;
    font-size:14px;}
.st-tinytitle p{
    color:#87929A;
    font-size:11px;
    line-height:15px;}


/* ================= Alert Boxes ================= */
.albox{
    font-size:12px;
    line-height:17px;
    box-shadow:0px 1px 0px #F7F7F7;
    position:relative;
    margin:15px 0px;
    padding:14px 42px;
    border-radius:3px;}
.albox .close{
    display:block;
    position:absolute;
    width:30px;
    height:30px;
    text-indent:-9999px;
    right:0;
    top:0;
    background:url(../img/icons/mini/close-opacity-21.png) no-repeat center;}
.albox .close:hover{
    background:url(../img/icons/mini/close-opacity-42.png) no-repeat center;}
.albox .icon{
    position:absolute;
    left:14px;
    top:14px;}
.warningbox{
    background:#FFF8D8 url(../img/icons/error/error.png) no-repeat 14px 14px;
    border:1px solid #F3D97E;
    color:#A68510;}
.succesbox{
    background:#EBF9E2 url(../img/icons/error/accept.png) no-repeat 14px 14px;
    border:1px solid #BEE4A5;
    color:#658C2C;}
.informationbox{
    background:#E9F3F8 url(../img/icons/error/help.png) no-repeat 14px 14px;
    border:1px solid #BBD7E4;
    color:#3876C6;}
.errorbox{
    background:#F8E9E9 url(../img/icons/error/cross.png) no-repeat 14px 14px;
    border:1px solid #E4BBBC;
    color:#BF2C11;}

/* ================= Dialog Boxes ================= */
.dialogbox{
    background:#F8F8F8;
    border:1px solid #DEDEDE;
    color:#666;}

/* ================= Icon Buttons ================= */
.icon-button{
    border-radius:4px;
    margin:2px;
    padding:8px 10px;
    border:1px solid #CDDCEA;
    border-bottom:1px solid #B8C6D2;
    background:#fff url(../img/iconbutton-bg.png) repeat-x bottom;}
.icon-button:hover{
    border:1px solid #AFC8DD;
    border-bottom:1px solid #96ABBC;}
.icon-button img{
    margin-bottom:-5px;}
.icon-button:active{
    background:#fff url(../img/icon-button-bg-active.png) repeat-x top;}
.icon-button span{
    padding-left:8px;
    color:#2E71A5;}
.icon-button a:hover span{
    color:#2E71A5;}




/* ================= Button Styles ================= */
.button-blue{
    background:#4088BF url(../img/button-blue.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #1A527D;
    border-bottom:1px solid #0F3049;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #174B73;}
.button-blue:hover{
    border:1px solid #0F3049;
    border-bottom:1px solid #0F3049; opacity:0.95;}
.button-blue:active{box-shadow: inset 0 0 0.5em #174B73;}

.button-aqua{
    background:#519EAC url(../img/button-aqua.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #27676E;
    border-bottom:1px solid #173C40;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #27676E;}
.button-aqua:hover{
    border:1px solid #173C40;
    border-bottom:1px solid #173C40; opacity:0.95;}
.button-aqua:active{box-shadow: inset 0 0 0.5em #174B73;}

.button-green{
    background:#51AC53 url(../img/button-green.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #276E27;
    border-bottom:1px solid #174017;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #276E27;}
.button-green:hover{
    border:1px solid #174017;
    border-bottom:1px solid #174017; opacity:0.95;}
.button-green:active{box-shadow: inset 0 0 0.5em #174017;}

.button-gray{
    background:#fff url(../img/button-gray.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#818181;
    border:1px solid #C5C5C5;
    border-bottom:1px solid #969696;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #fff;}
.button-gray:hover{
    border:1px solid #969696;
    color:#666;
    border-bottom:1px solid #969696; opacity:0.95;}
.button-gray:active{box-shadow: inset 0 0 0.5em #ccc;}

.button-red{
    background:#A2665B url(../img/button-red.png) repeat-x bottom;
    font:bold 12px Arial, Helvetica, sans-serif;
    color:#fff;
    border:1px solid #67352E;
    border-bottom:1px solid #3C1F1B;
    border-radius:2px;
    padding:7px 10px;
    margin:0px 3px;
    text-shadow: 0px -1px #67352E;}
.button-red:hover{
    border:1px solid #3C1F1B;
    color:#666;
    border-bottom:1px solid #3C1F1B; opacity:0.95;}
.button-red:active{box-shadow: inset 0 0 0.5em #3C1F1B;}

.button-blue:hover, .button-aqua:hover, .button-green:hover, .button-red:hover{ color:#fff;}




/* ================= Pagination ================= */

.pagination{
    text-align:center;
    padding:20px 0px;}
.pagination li{
    display:inline;
    text-align:center;
    font-size:12px;
    color:#3E7CAC;
    padding-right:3px;
    font-weight:bold;}
.pagination li a{
    color:#3E7CAC;
    border:1px solid #D6D6D6;
    border-radius:3px;
    background:url(../img/simplebox-title-bg.png) repeat-x bottom;
    padding:8px 12px;
    box-shadow:0px 1px 1px #EDEDED;}
.pagination li a:hover{
    border:1px solid #C5C5C5;
    color:#333;}
.pagination li a:active{
    box-shadow: inset 0 0 0.5em #D6D6D6;}


/* ================= Page Wrap ================= */
.pagewrap{
    background:url(../img/pagewrapbg.png) repeat-x bottom;
    border-top:1px solid #CBDAE8;
    border-bottom:1px solid #CBDAE8;
    font-size:12px;
    color:#859099;
    padding-left:5px;
    height:38px;}
.pagewrap li{
    display:inline;
    background:url(../img/page-wrap-libg.png) no-repeat right;
    line-height:38px;
    padding:12px 20px 12px 8px;}
.pagewrap a{
    color:#859099;}
.pagewrap a:hover{
    color:#344654;}


/* ================= Statistics ================= */
.statistics{ padding:0;}
.statistics li{
    border-bottom:1px solid #E3EBF3;
    padding:12px 14px;
    display:block;
    position:relative;}
.statistics li p{
    display:block;
    position:absolute;
    text-align:right;
    right:14px;
    top:12px;}
.statistics .green{ color:#308359;}
.statistics .blue{ color:#4B789A;}
.statistics .red{ color:#CD6557;}

/* ================= Toggle Message ================= */
.toggle-message{
    background:#F7F9FC url(../img/toogle-message-bg.png) repeat-x top;
    border:1px solid #CBDAE8;
    cursor:pointer;
    border-radius:2px;
    position:relative;
    line-height:21px;}
.toggle-message .title{
    color:#40515E;
    padding:10px 15px;}
.toggle-message:hover{
    border:1px solid #B3C9DD;}
.toggle-message .title:hover{
    color:#344654;}
.toggle-message .hide-message{
    color:#586873;
    padding:15px;
    display:none;
    padding-top:0;}
.toggle-message .d-icon{
    position:absolute;
    right:15px;
    top:19px;}

/* ================= Tabs ================= */
#tabs{border:1px solid #fff;}

/* ================= Sliders ================= */
#slider-range-max, #slider-range, #slider{
    border:1px solid #D2D4D4;
    background:#EBF5FE;
    height:10px;
    border-top:2px solid #A6A7A7;
    border-radius:20px;}

/* ================= Accordion ================= */
#accordion{
    border-radius:0px;}
#accordion h3 a{
    color:#40515E;
    border-radius:0px;
    font:bold 12px Arial, Helvetica, sans-serif;
    background:none;}

/* ================= Imagebox ================= */
.imagebox{
    padding:15px;}
.imagebox img{
    float:left;
    margin:2px;
    border:2px solid #fff;}
.imagebox img:hover{
    border:2px solid #215983;}


/* ================= Loading Box ================= */
.loadingbox{
    text-align:center;
    padding:35px 10px;
    border:1px solid #CBDAE8;
    color:#9BA4AB;
    font-size:11px;
    line-height:19px;}
.loadingbox h3{
    font-size:20px;
    color:#344654;
    padding:20px 0px;}


/* ================= Footer ================= */
#footer{
    color:#B3C6D5;
    font-size:11px;
    line-height:17px;
    padding:20px 0 0 0;}
#footer .left-column{
    float:left;
    width:660px;}
#footer .right-column{
    float:right;
    width:280px;
    text-align:right;}


/* ================= Login Form ================= */
.loginform{
    width:360px;
    margin:0px auto;
    margin-top:50px;
    box-shadow:0px 4px 90px #EEEEEE;
}
.loginform .title{
    background:url(../img/login-title.png) no-repeat;
    text-align:center;
    height:50px;
    padding-top:20px;}
.loginform .body{
    padding:23px 29px 40px 29px;
    background:url(../img/login-form-body-bg.png) repeat-x bottom;}
.login-input-pass{
    border:none;
    font:19px Arial, Helvetica, sans-serif;
    color:#B6C3C9;
    width:250px;
    border:1px solid #CED3D8;
    border-radius:3px;
    border-top:1px solid #A0A4A9;
    padding:10px;
    padding-left:40px;
    margin-bottom:19px;
    background:url(../img/password-input.png) repeat-x top;}
.login-input-pass-active{
    border:none;
    font:19px Arial, Helvetica, sans-serif;
    color:#8A9EA8;
    width:250px;
    border:1px solid #CED3D8;
    border-radius:3px;
    border-top:1px solid #A0A4A9;
    padding:10px;
    padding-left:40px;
    margin-bottom:19px;
    background:url(../img/password-input.png) repeat-x top;}
.login-input-user{
    border:none;
    font:19px Arial, Helvetica, sans-serif;
    color:#B6C3C9;
    width:250px;
    border:1px solid #CED3D8;
    border-radius:3px;
    border-top:1px solid #A0A4A9;
    padding:10px;
    padding-left:40px;
    margin-bottom:19px;
    background:url(../img/username-input.png) repeat-x top;}
.login-input-user-active{
    border:none;
    font:19px Arial, Helvetica, sans-serif;
    color:#8A9EA8;
    width:250px;
    border:1px solid #CED3D8;
    border-radius:3px;
    border-top:1px solid #A0A4A9;
    padding:10px;
    padding-left:40px;
    margin-bottom:19px;
    background:url(../img/username-input.png) repeat-x top;}

.loginform .log-lab{
    color:#A4AAB2;
    font-size:14px;
    font-weight:bold;
    display:block;
    padding-bottom:11px;}
.loginform .button{
    width:300px;
    height:49px;
    font:bold 16px Arial, Helvetica, sans-serif;
    color:#fff;
    background:url(../img/login-button.png) no-repeat 0px 0px;
    border:none;}
.loginform .button:hover{
    background:url(../img/login-button.png) no-repeat 0px -50px;}
.loginform .button:active{
    background:url(../img/login-button.png) no-repeat 0px -100px;}

/* input */
input.post_input,select.post_select {
    font-family:trebuchet MS,Lucida Sans Unicode, Lucida Sans, Sans-Serif;
    background-color:#F9F9F9;
    width:160px;
    border:1px solid #ccc;
    color:#181818;
    font-size:1em;
    padding:5px;
}
input.post_input {
    width:160px;
}
/* Max lenght */
.notification {
    border:3px solid #d55b5b;
    background-color: #ffcdcd;
    padding:5px;
}

最佳答案

解决方案很棘手，但它完全可行!我必须在以前的工作中解决类似的问题，我们有一个需要适应所有屏幕分辨率的两列样式布局。

首先(我们稍后会处理宽度)，我们想为两列(“侧边栏”和“页面”)创建一个“类似表格”的感觉，这意味着如果侧边栏比内容高一个页面，“页面”列的背景应该一直延伸到底部(与侧边栏高度相同)，反之亦然。为了实现这一点，我们做了一些小的划分，如下所示:

<div id="main">
    <div id="two_columns">
        <div id="sidebar">
            <!-- Content goes here -->
        </div>
        <div id="page">
            <!-- Content goes here -->
        </div>
        <!-- Cross-browser clearing of floats -->
        <div style="clear:both;"></div>
    </div>
</div>

这里我们要做的是给“main”和“sidebar”一样的背景，给“two_columns”和“page”一样的背景。这样，当“sidebar”或“page”的高度增加时，“main”和“two_columns”的高度都会随之增加。

其次，我们要确保这可以适应所有屏幕分辨率。幸运的是，这个 div-ception 设置非常适合这个。为简单起见，我们假设背景是彩色的。

#main {
    /*
        No width shall be set!  It will expand to
        fit inside its parent.
    */
    background-color:#e5e5e5;
    border:1px solid #aeaeae; /* I think borders are pretty */
}

#two_column {
    margin-left:190px; /* width is 190px less than parent ("main") */
    background-color:#fff;
}

#sidebar {
    margin-left:-190px;
    float:left;
    width:189px;
    border-right:1px solid #aeaeae; /* Borders are pretty */
}

#page {
    float:right;
    /*
        Fill to width of parent container "two_column" which
        is "main"s width - 190 (and "main" might be the same
        width as the body, if you so choose).
    */
    width:100%;
}

砰!应该这样做。

关于html - 网站不适合所有屏幕分辨率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15375347/

文章推荐： c# - 从应用程序构建操作系统

文章推荐： c - 正确打印输出

文章推荐： c++ - OpenMP编译执行

ios - 在应用程序准备好销售后编辑 5.5 屏幕、4.0 屏幕、3.5 屏幕和 iPad 屏幕的屏幕截图
我最近为我的一个 iPhone 应用程序上传了更新，现在该应用程序刚刚准备好销售，但我只更新 iPhone 6 的屏幕截图，而不更新其他屏幕截图。现在我明白了，它们是新游戏的旧屏幕，这可能会让用户感到
scala - 如何在scala中清除终端/屏幕
我需要清除 Scala 中的控制台屏幕我尝试过标准 ANSI Clear 屏幕，rosettacode.org 建议将其称为“终端控制/清除屏幕”here object Cls extends Ap
scala - 如何在scala中清除终端/屏幕
我需要清除 Scala 中的控制台屏幕我尝试过标准 ANSI Clear 屏幕，rosettacode.org 建议将其称为“终端控制/清除屏幕”here object Cls extends Ap
c# - 查找鼠标指针所在的监视器/屏幕
我将从头开始，我正在开发一个跨越多个监视器的应用程序，每个监视器将包含一个 WPF 窗口，并且这些窗口使用一个 View 模型类进行控制。现在假设我在 200,300 (x,y) 处的所有窗口上都有一
java - 矩形不断离开面板(屏幕)
谁能告诉我如何阻止矩形在我的游戏中离开面板(屏幕)？矩形随着击键并排移动。最佳答案这是你应该做的: 1. 跟踪矩形的 (x,y) 坐标。 2. 确保矩形的x + width 不大于JPanel 的
使用电源按钮打开和关闭 Android 屏幕
我正在尝试检测电源按钮是否在 4 秒内被按下 3 次。以下代码无效。 public class PowerButtonReceiver extends BroadcastReceiver{ s
HTML 自动调整横幅大小以适应不同的格式/屏幕
我为我的新网上商店制作了一个横幅，但有一个问题。例如，当网站在我的笔记本电脑上显示为全尺寸时，横幅非常适合，但是当我在移动设备、笔记本电脑和较小尺寸的网站上看到该网站时，横幅就不合适了。我真的希望你们
linux - 屏幕，断开连接时进程终止？
我希望这个问题能够得到解决: 给定，屏幕 session 正在运行，并在终端中打开(附加)。问题。如果终端 session 终止，但未与屏幕 session 分离，则屏幕 session 中运行的
flutter - 单击通知路由到特定的 flutter 屏幕
如何在点击通知时转到特定屏幕？我在 javascript 中使用了云功能，当我点击通知时，它打开了我的应用程序而不是特定的屏幕 _fcm.configure( onMessage: (Map m
qt - 我可以在运行时更改像素比(屏幕)吗？
Qt 确实支持像素比率 (devicePixelRatio)，这在我的各种桌面上是不同的: ) 桌面 w1920 h1080 - 比例:1 ) 桌面 w3840 h2160 与 qputenv("QT
multithreading - 使用STDOUT(屏幕)与常规文件的性能
我一直在做一些研究，发现了这种情况。如果要写入STDOUT(屏幕)，将无法执行多线程脚本，该脚本通过简单的单线程脚本可以更快地打印数据。但是，如果您写入这样的文件: myPrinter.perl >
abap - 找出所有程序 dynpro 屏幕？
我是 ABAP 的新手，我想制作一个具有多个屏幕和一个初始主屏幕的程序，可以在其中看到所有程序屏幕的列表。我知道我可以对它们进行硬编码，但应该有更好的方法。如果有任何类型的字段/区域，我需要使此列表
jailbreak - 如何以编程方式解锁 iOS 屏幕？
我目前正在探索创建越狱调整。我想解锁手机屏幕。这是怎么做到的？在 iOS 7 上可以使用哪些私有(private) API 来实现这一点？最佳答案如果我们谈论越狱，那么您可以编写一个 Spring
iphone - 关闭 iPhone 屏幕
我正在寻找一种方法来关闭 iPhone 屏幕而不让 iPhone 进入休眠状态。我真的不介意关闭屏幕是否违反苹果规则。将窗口 alpha 设置为 0 可以解决问题吗？我可以更改某种 boolean 值
tmux - 如何在拖尾日志时清除 tmux 屏幕？
我在 iTerm2 中使用 tmux。当我在 bash 中时，使用 Ctrl-L 清除屏幕有效，但在我拖尾服务器日志时不起作用。我该如何解决？最佳答案您可以使用 send-keys -R 清除当
iphone - 以编程方式锁定和解锁 iPhone 屏幕
如何以编程方式锁定和解锁 iPhone 的主屏幕(即设备本身)？最佳答案这是不可能的。但是，您可以在应用程序运行时“阻止”手机锁定。 [UIApplication sharedApplicatio
javascript - 如何通过ajax每X秒自动更新 Canvas 屏幕？
我的任务是创建社交网络我有一个主页，显示用户通过 Canvas 创建的所有绘图。用户可以在自己的绘图上绘图，并且可以添加也有权在其绘图上绘图的贡献者。问题是他们可以以某种方式同时绘制。我想做的是，
dart - Flutter中的状态管理(屏幕)->持久屏幕
退出后，如何从我在应用程序中打开的最后一个屏幕继续。比如说我有屏幕A，B和C，并且在关闭应用程序之前我在屏幕B上。我的问题是当我再次打开应用程序时如何进入屏幕B。最佳答案当SharedPrefe
powershell - 隐藏的 sleep 屏幕
我试图停止一个进程，然后休眠10秒钟，杀死下一个进程再休眠10秒钟，然后启动另一个进程。问题是一切都立即运行。所以我想开始的过程没有运行，因为其他人都没有停止。 Start-Process Power
javascript - 响应未显示 ID 屏幕？
我正在尝试以 HW 身份进行测验。我输入的回复应该会出现在屏幕上，但事实并非如此。我使用函数response()多次检查了“15”行和“17”行中出了什么问题。我没有发现任何错误，需要调试和编写正确语

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 网站不适合所有屏幕分辨率