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编译执行

网站
我有这个网站，这个特定页面是安全的，但是当它回发时，它回发到一个不安全的页面。如何解决？我正在使用 ASP.NET 向导。我有这个页面 - checkout.aspx，页面包含这个控件 checko
redirect - 将 Azure 网站 URL 指向另一个 Azure 网站
我有 2 个 azure 网站 - 两个独立的项目我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
redirect - 将 Azure 网站 URL 指向另一个 Azure 网站
我有 2 个 azure 网站 - 两个独立的项目我现在有 2 个网址: myazurewebsite.azurewebsites.net myazureblog.azurewebsites.net
java - 将 React 网站更改为同一域上的 java 网站，但仍显示 React 网站
环境: 旧网站: React 托管在 Heroku URL( http://sameurl.com ) 新网站: Java 托管在 Heroku URL ( http://sameurl.com )
asp.net - 将 ASP.NET 网站 + 数据库发布到 Windows Azure 网站
我已在 Windows Azure 上注册了一个测试帐户来对其进行测试。我构建了一个 Hello world ASP.NET Web 应用程序 + 数据库只是为了测试。我安装了 Visual Stu
performance - : {REST API, 网站} --> {数据库} 或 {网站} --> {REST API} --> {数据库} 哪个更好？
我有一个可以收集和显示各种测量值的产品(不会详细介绍)。正如人们所期望的那样，显示部分是一个数据库+建立在其之上的网站(使用 Symfony)。但是，我们可能还会创建一个 API 来向第三方公开数据
Android软键盘调整背景图片大小(网站)
这个问题在这里已经有了答案: Software keyboard resizes background image on Android (16 个答案) 关闭 8 年前。我有一个类似的问题:So
Maven Checkstyle 网站
这个问题似乎很常见，但我真的无法根据现有答案解决问题。我有一个简单的 maven 项目，没有任何复杂的部署配置等，并且想在点击“mvn site”时生成一个 Maven CheckStyle 报告。
Azure 网站 - 纵向扩展与横向扩展
有没有人看过有关何时进行横向扩展与纵向扩展的最佳选择的任何分析或信息。什么时候一个比另一个更有意义。目前，在标准模式和基本模式下，2 个小型实例的费用与 1 个中型实例的费用相同。拥有 2 个小型
Azure 网站。如何查找有关停止服务的日志
有没有办法找到 azure 网站何时停止？ (我通过门户网站停止了网站，但我不记得是什么时候......) 我正在寻找一些日志，但没有找到任何有用的内容。谢谢。最佳答案您拥有的最接近的是 azu
具有扩展和冗余功能的 Azure 网站
我目前在 Azure VM 的 IIS 中拥有一个网站。我已将该站点复制到 2 个可用区域中的 2 个虚拟机上。这可以保护网站免遭停机。我需要为高负载时刻实现一些可扩展性。这似乎就是创建音阶集的目
Azure CDN 网站
我有一个托管在 Azure 上的网站 ( http://mike-ward.azurewebsites.net/ )。我从 Azure 门户设置了一个指向(引用？)我的网站的 Azure CDN。根据
Azure 网站 - 识别主机插槽
我有一个 Azure 网站(不是 Web 角色)，有 2 个槽:生产和暂存。我只想为生产插槽启用 CDN，而不是为登台启用，问题是我找不到识别主机插槽的方法。 RoleEnvironment 不可用
javascript - 捕获浏览器内容的屏幕截图(网站)
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。 4年前关
Azure 网站 - 持久文件问题
我们正在考虑将一些网站从 Azure 云服务迁移到 Azure 网站(事情似乎就是这样进行的)。显然，我们被明确告知云服务不会保留文件系统状态，因为它们会在机器故障时重新部署。我假设网站是基于 Bl
连接到虚拟机的 Azure 网站
我有一个 Azure 网站，需要使用在 VM 上运行的 Elasticsearch 服务。虽然我需要能够锁定对 Elasticsearch 的访问，以便只有 Azure 网站可以访问它，但我似乎无法
Azure 网站 DNS
我有一个 azure 网站，位于 yis3.azurewebsites.net - 我已将其提升为“共享”网站，以便我可以使用自定义域。我拥有从 123-reg.co.uk 购买的域名 yorkshi
Azure 网站 - 如何写入文件
我正在使用 abcPDF 动态创建 PDF。我想保存这些 PDF，以便客户随时检索。最简单的方法(也是我现在在当前服务器上所做的方法)是将完成的 PDF 保存到文件系统。看来我一直坚持使用 blo
Azure 网站 - 监控数据
我们正在尝试了解 Windows Azure 管理 API 为 Azure 网站(而非 Webroles)返回的监控数据的复杂性例如，下图描述了为 CPUTime 检索的数据点。它似乎表明，在晚上
具有多个站点的 Azure 网站
看起来真的很愚蠢，因为我找不到它: 门户网站似乎不太直观，我如何为一个“网站”付费并在其中运行最多 500 个网站？我想当我通过单击左下角的加号添加“网站”时，我添加了整个虚拟机而不是子站点。如何仅添

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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