Reputation: 1940
I have a problem with the Height Tag in CSS. I want the page to be displayed without any scrollbars and just can't figure out why when i change "height" in the body tag from 99% to 100% suddenly scrollingbars appear and break the design.
I want to know why this happens and what's the reason for it.
thanks!
<!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. |
<span="address">Website Information</span> — <a href="mailto:info@info.eu">info@info.com</a>
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</body>
</html>
Upvotes: 0
Views: 295
Reputation: 12524
There is also bottom margin on the body.
body {
height: 100%;
margin: 0 0 0 20px;
}
Though you should consider using a css reset such as eric meyers reset or normalize
Upvotes: 2
Reputation: 131
It breaks the page because you use 99% of the page, then you move everything to the right of 20px. it moves the 99% outside and use more. here is the solution, i think both of them work :
body {
height: 100%;
margin-left: 20px;
margin-right: -20px;
margin-top:0px;
}
or
body {
height: 100%;
padding-left: 20px;
padding-right: -20px;
margin-top:0px;
}
Upvotes: 0
Reputation: 1
Replacing your body style with this should solve the issue :
body {
height: 100%;
margin-left: 20px;
margin:0px;
}
Upvotes: 0