解釋爲什麼高度= 100％中斷設計

我在CSS中的高度標記有問題。我希望頁面在沒有任何滾動條的情況下顯示，並且不知道爲什麼當我將身體標記中的「高度」從99％更改爲100％時突然出現滾動條並打破了設計。解釋爲什麼高度= 100％中斷設計

我想知道爲什麼會發生這種情況，原因是什麼。

謝謝！

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 

html { 
    height:100%; 
} 

body { 
    height: 99%; 
    margin-left: 20px; 
    margin-top:0px; 

} 

.gallerytitle { 
    position: absolute; 
    top: 20px; 
    font-family: serif; 
    font-size: 20px; 
    text-align: left; 
} 

.fullgallerytitle { 
text-align: left; 
font-family: sans-serif; 
font-size: 12px;} 

.events{ 
position: absolute; 
font-family: sans-serif; 
font-size: 12px; 
top: 20px; 
right: 20px;} 

/* Center Text Section */ 

.area { 
    width: 100%; 
    height: 100%; 

    position: relative; 
} 

.middlespace { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    display: table; 
} 

.middlespace p { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 



.bottom-left { 

    position: absolute; 
    font:sans-serif; 
    bottom: 15px; 
    left: 15px; 
} 



.contact { 
    font-size: 11px; 
    font-family: sans-serif; 
    border-bottom: 1px black dotted; 
} 

.exhibitiontitle { 
    color: #d4d4d4; 
    font-style: italic; 
    font-family: sans-serif; 
    font-size: 10px; 
    text-align: center; 
} 

.contact { 
    font-size: 11px; 
    font-family: sans-serif; 
    border-bottom: 1px black dotted; 
} 

.bold { 
    font-family: serif; 
} 


.about { 
    font-size: 11px; 
    font-family: sans-serif; 
} 


.address { 
font-size: 11px; 
border-bottom: 1px grey dotted; 
} 




.bottom-right { 
    position: absolute; 
    bottom: 15px; 
    right:15px; 
     font-style: italic; 
    color: #8e8e8e; 
    font-size: 11px; 
} 

.openinghours { 
    font-style: italic; 
    color: #8e8e8e; 
    font-size: 11px; 
    } 
.subscribebutton 
{ 

height:10px; 
font-size: 9px; 

} 

.subscribebox 
{ 

height:10px; 
font-size: 9px; 

} 



</style> 

<title>XYZ</title> 

</head> 
<body> 
    <div class="gallerytitle">XYZ<br /></div> 
    <div class="events">LOREM</div> 




<div class="bottom-left"> 
     <span class="about"> 

      <span class="bold">XYZ</span> is a project by XZY.&nbsp;&nbsp;&#124;&nbsp; 
      <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


     </span> 
</div> 


<div class="bottom-right"> 
    <span class="openinghours">Open by Appointment</span><span class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sponsored by XYZ</span> 
</div> 


</body> 
</html>

來源

2012-08-13 Roland

填充和利潤的可能性最大。 – TheZ 2012-08-13 20:43:24

@TheZ他沒有使用填充物，他使用的唯一邊距是水平邊距。當我正確地閱讀這個問題時，他在垂直滾動條上存在問題。 @ Roland我無法重現您的問題。你可以製作一個JSFiddle嗎？當我將其更改爲100％時，不會出現滾動條。 – 2012-08-13 20:52:54

你沒有任何機會有一個鏈接到一個活網站，是嗎？ – snuffn 2012-08-13 20:52:55

還有對身體的底部邊緣。

body { 
    height: 100%; 
    margin: 0 0 0 20px;  
}

雖然你應該考慮使用一個CSS復位，如埃裏克·邁耶斯重置或恢復正常

來源

2012-08-13 20:53:13 Jrod

爲什麼使用逗號？ – snuffn 2012-08-13 20:54:56

但是很好，「底部邊緣」可能是問題。 – snuffn 2012-08-13 20:56:09

margin-bottom它是！謝謝Jrod – Roland 2012-08-13 21:02:09

與此更換你的身體風格應該解決這一問題：

body { 
height: 100%; 
margin-left: 20px; 
margin:0px;

}

來源

2012-08-13 20:50:56 Jonathan

最後的'margin'聲明將覆蓋'margin-left'。 – 2012-08-13 20:52:03

'margin：0'將取消'margin-left'。而且OP表示他不能將「高度」改爲100％。 – snuffn 2012-08-13 20:52:04

，因爲你使用的頁面的99％，這打破了網頁，那麼您將一切都爲20px的權利。它將外部99％移動並使用更多。這裏是解決方案，我認爲他們兩人的工作：

body { 
    height: 100%; 
    margin-left: 20px; 
    margin-right: -20px; 
    margin-top:0px; 
}

或

body { 
    height: 100%; 
    padding-left: 20px; 
    padding-right: -20px; 
    margin-top:0px; 
}

來源

2012-08-13 21:27:15

解釋爲什麼高度= 100％中斷設計

回答

相關問題