css - 将 高度设置为 100% 在桌面上有效但在平板电脑上无效？

Question

更新:(i) 我使用 px 作为宽度的事实与它无关(是的，这是一个糟糕的习惯，但它不是导致问题的原因)(ii) 似乎是右边的对 Angular 线按钮引起了它，我怀疑是因为我必须对它们的位置做些什么才能使它们看起来“正确”，所以现在我正在研究一种不同的方法来获得该按钮影响(iii) 我很想知道为什么我为此失去了代表。 . .

原帖:我要疯了!我正在为一个 friend 做一个网站。您可以在这里查看:jameslago.co.uk

如您所见，他想要两侧各有一系列条纹。我正在使用多个 <div> s，很多 float 和定位的东西，包括设置高度:100%。这在桌面上运行良好(已检查主要浏览器 - chrome、firefox、IE9、safari、opera)。我的意思是，我的 CSS 看起来很笨重，但一切正常。但是，在平板电脑上，我会在底部看到大量的空白，当我把它变成纵向时更糟。这个问题并没有出现在模拟器中(我正在使用 ripple)，只是当我在我的平板电脑上实际查看该网站时。我的 friend 在他的平板电脑上遇到了同样的问题(我有一个 nexus，他有一个 ipad)。

我在手机上查看时遇到了同样的问题 - 在那里，它实际上在横向方向上将其切断。

这几乎就像是将高度设置为屏幕宽度(设备的较短边缘)。但为什么它在移动设备上而不是在桌面上这样做呢？为什么，如果它这样做，我在横向时是否会得到空白(正如您认为的那样？)以及如何使它适合平板电脑/手机的 100% 高度？

这是我相当可怕的 CSS:

/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1.2;
}
ol { 
    padding-left: 1.4em;
    list-style: decimal;
}
ul {
    padding-left: 1.4em;
    list-style: square;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
} 
/* end reset browser styles */

body, html {
    margin: 0;   
    height: 100%;
    min-width: 1360px;
    position: relative;
    overflow-y: hidden;   
}

.wrap {
    margin: auto;
    background-color:#565656;
    width: 100%;
    height: 100%;    
}


.leftMenu {
    margin: 0 auto;
    position: absolute;
    top: 0px;
    left: 0px;    
    width: 160px;
    height: 100%;
    background-color: #212121;     
}

.greyLeft {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 160px;    
    width:40px;
    height: 100%;
    background-color:#565656;   
}

.blackLeft {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 200px;  
    width: 20px;
    height: 100%;
    background-color:#212121;   
}

.orangeLeft {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 220px;    
    width: 40px;
    height: 100%;
    background-color: #FA8700;       
}

.thinLeft {
    margin: auto;
    position: absolute;
    top: 0px;
    left: 260px;    
    width: 20px;
    height: 100%;
    background-color:#212121;  
}

.thinRight {
    margin: auto;
    position: absolute;
    top: 0px;
    right: 260px;   
    width:20px;
    height: 100%;
    background-color:#212121;
}


.orangeRight {
    margin: auto;
    position: absolute;
    top: 0px;
    right: 220px;  
    width: 40px;
    height: 100%;
    background-color: #FA8700;    
}

.blackRight {
    margin: auto;
    position: absolute;
    top: 0px;
    right: 200px;   
    width: 20px;
    height: 100%;
    background-color:#212121;
}


.greyRight {
    margin:auto;
    position: absolute;
    top: 0px;
    right: 160px; 
    width:40px;
    height: 100%;
    background-color:#565656;
}



.rightMenu {    
    margin: auto;
    float: right;
    top: 0px;
    right: 0px; 
    width: 160px;
    height: 100%;
    background-color: #212121;        
}



.diag {    
     position: absolute;    
     overflow: hidden;  
}

.logo {
    z-index: 1;
    position: absolute;
    padding-left: 20px;
    float: right;
}

.central {
    z-index: 0;
    position: absolute;
    min-width: 800px;
    overflow: scroll;
    left: 280px;
    right: 240px;   
    margin: auto;    
    height: 100%;
    text-align: left;
    font-family: impact, Arial;
    font-size: 12pt;
    color:#212121;
    float: left;
    padding: 20px;
    overflow: hidden;
}

.central h1 {
    text-align: center;    
}

.galleryContainer {
    z-index: 0;
    overflow: scroll;
    position: absolute;
    left: 250px;
    right: 250px;
    bottom: -30px;
    margin: auto;
    height: 100%;    
    text-align: center;
    font-family: impact;
    color:#212121;
    font-size: 16pt;    
}

.slideshow {    
   width: 750px;
   height: 500px;
   margin: 50px auto;
   padding: 10px;
   background-color: #565656;
   border: 2px #565656 solid;
}

.small {   
    width: 70px;
    height: 50px;   
    padding: 5px;
    border: 2px #565656 solid;
    margin: auto;
    float: left;
}



.big { 
    width: 700px;
    height: 400px;
    margin: auto;
    padding: 10px;
}

.innerBig {
    width: 700px;
    height: 400px;
    margin: auto;
}

.makeMiddle {
    width: 705px;
    margin: auto;    
}

.description {
   text-align: center;
    font-family: impact;
    color:#212121;
    font-size: 12pt;

}

a:link {border: none; text-decoration:none;}      /* unvisited link */
a:visited {border: none; text-decoration:none;}  /* visited link */
a:hover {border: none; text-decoration:none;}  /* mouse over link */
a:active {border: none; text-decoration:none;}  /* selected link */

我已经使用左侧的一个 div 完成了另一个网站，将高度设置为 100%，并且它本身运行良好。我看不出我做了什么不同的事情，除了更多 <div>就在这个里面!

Answer 1

为了网站的全面响应1)要么你必须定义两个CSS。即一种用于桌面 View ，一种用于移动设备或平板电脑 View 。

2) 所有尺寸都尽量在 % 值中，您在 % 中定义了一些值，但最大尺寸以 px 为单位，所以请尽量避免这些事情。

它会起作用。