Question

更新：（i）我使用px宽度的事实与它无关（是的，这是一个可怕的习惯，但它没有引起问题）（ii）似乎右边的对角线按钮导致了它，我怀疑是因为我的位置使它们看起来“正确”，所以我现在正在采用不同的方式来获取该按钮影响（iii）我很想知道为什么我失去了代表。。

原始邮寄：我疯了！我正在为朋友制作一个网站。你可以在这里查看：jameslago.co.uk

正如你所看到的，他希望两侧都有一系列条纹。我正在使用多个<div> s，许多浮动和定位的东西，包括设置高度：100％。这在桌面上工作正常（已在主要浏览器中检查过 - chrome，firefox，IE9，safari，opera）。我的意思是，我的CSS看起来很笨重，但一切正常。然而，在平板电脑上，我会在底部获得大量的空白区域，当我将它变成肖像时更糟糕。这个问题没有出现在模拟器中（我正在使用涟漪），就在我实际在平板电脑上查看网站时。我的朋友在他的平板电脑上遇到了同样的问题（我有一个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。即一个用于dextop视图，一个用于移动或平板电脑视图。

2）所有尺寸都尝试为％值，您已在％中定义了一些值，但最大尺寸为 px 所以请尽量避免这些事情。

它会起作用。

Answer 2

    .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;    
    }

喜欢此代码，您已使用
    position: absolute;
    left: 250px;
    right: 250px; 
    bottom: -30px;
尽量避免使用％它会起作用。

将<div> height设置为100％适用于桌面而非平板电脑？</div>

2 个答案: