我目前正在为我的一位朋友在一个网站上工作，他在匈牙利经营一家小酒店。 Here it is.
到目前为止，我对结果非常满意。然而，我的问题是，当我在笔记本电脑上以1440x900查看它或放大我的台式电脑时，“盒子”容器的背景会被剪裁而不会延伸到页面底部。
我摆弄各种各样的价值观但是对于我的生活，我找不到我犯的错误。也许有人会立即发现它。
这是html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.kaiserapartman.hu</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body class="pagebody"><img class="bg" src="img/bg.jpg"/>
<div id="main">
<div id="header">
<div id="flags"><table width="90" border="0" style="text-decoration:none">
<tr>
<td><a href="index.html"><img src="img/hu.jpg" width="28" height="18" alt=""/></a></td>
<td><a href="german.html"><img src="img/de.jpg" width="28" height="18" alt=""/></a></td>
<td><a href="english.html"><img src="img/uk.jpg" width="28" height="18" alt=""/></a></td>
<td><a href="russian.html"><img src="img/ru.jpg" width="28" height="18" alt=""/></a></td>
</tr>
</table>
</div>
<div id="content">
<div id="buttons"><table width="90" border="0" style="text-decoration:none">
<tr>
<td><a href="szolgal.html"><img src="img/taxi.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="mailto:info@kaiserapartman.hu"><img src="img/email.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="https://www.facebook.com/kaiser.apartman?fref=ts" target="_blank"><img src="img/facebook.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="callto://YourUserName"><img src="img/skype.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="kapcsolat.html"><img src="img/maps.png" width="90" height="90" alt=""/></a></td>
</tr>
<tr>
<td><a href="http://www.booking.com/hotel/hu/katser-apartman.de.html?sid=eff0e3583ef20caaee9af6506a40d7c4;dcid=4;ucfs=1;srfid=42991a3738960b3b84e19e97955bcc7a4f30f15dX1;highlight_room=" target="_blank"><img src="img/booking.png" width="90" height="90" alt=""/></a></td>
</tr>
</table>
</div>
<div id="logo"></div>
<div id="menu">
<div id="navbar" style="width:644px; float:left; clear:both;">
<li><a href="index.html" style="text-decoration:none; color:#4F1700;">Kezdőlap</a></li>
<li><a href="galeria.html" style="text-decoration:none; color:#4F1700;">Galéria</a></li>
<li><a href="arak.html" style="text-decoration:none; color:#4F1700;">Árak</a></li>
<li><a href="szolgal.html" style="text-decoration:none; color:#4F1700;">Szolgáltatások</a></li>
<li><a href="kapcsolat.html" style="text-decoration:none; color:#4F1700;">Elérhetöség</a></li></div>
</div>
<div id="box">
<div id="images"><table border="0">
<tr>
<td><img src="img/00001.jpg" width="340" height="225" alt=""/></td>
</tr>
<tr>
<td><img src="img/00002.jpg" width="340" height="225" alt=""/></td>
</tr>
</table></div>
<div id="text"><table border="0">
<tr>
<td><h1>Üdvözöljük a hévízi Kaiser Apartman weboldalán!</h1>
<h2>Apartmanházunk csendes fekvésű helyen, Hévíz főutcájában, a hévízi termáltótól 200 méterre található.<p>Önellátó apartmanokat kínálunk, ingyenes Wi-Fi internettel és kábeltévével, valamint privát parkolási lehetőséggel.<p>A közelben reggelizők, éttermek, kávézók, üzletek találhatók.<p>Házunktól a buszmegálló 200 méterre, Keszthely (Balaton) 7 km-re, a Hévíz-Balaton Airport repülőtér 15 km-re helyezkedik el.<p>Taxi transzfer szolgáltatást biztosítunk távolabbról érkező vendégeink részére.
Kérjen árajánlatot!</h2>
</td>
</tr>
</table>
</div>
<div id="header"></div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
</html>
这是CSS：
@charset "utf-8";
/* CSS Document */
.pagebody {
margin:0px;
}
.bg {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
}
#main {
width:100%;
min-height:100vh;
position:absolute;
font:Verdana, sans-serif;
font-size:24px;
font-weight:bold;
z-index:1;
}
#header {
width:100%;
height:70px;
position:absolute;
background-image:url(img/header.jpg);
z-index:3;
}
#flags {
position:absolute;
z-index:3;
padding:0px;
}
#footer {
width:100%;
height:19px;
background-image:url(img/footer.jpg);
position:fixed;
z-index:6;
bottom:0px;
}
#content {
width:1100px;
min-height:100vh;
z-index:2;
position:relative;
left:50%;
margin-left:-500px;
}
#buttons {
width:100px;
height:500px;
left:1000px;
top:70px;
position:absolute;
z-index:5;
}
#box {
width:1000px;
min-height:100vh;
height:auto;
z-index:1;
position:absolute;
background:url(img/content.png);
}
#images {
top:275px;
position:absolute;
z-index:3;
left:10px;
padding-top:5px;
width:356px;
height:255px;
}
#text {
top:70px;
left:370px;
position:absolute;
z-index:3;
font-size:19px;
font:verdana;
font-weight:bold;
color:#4F1700;
width:620px;
}
#logo {
width:356px;
height:250px;
position:absolute;
z-index:4;
background-image:url(img/logo.png);
}
#menu {
width:644px;
height:70px;
background-color:gree;
position:absolute;
z-index:4;
left:356px;
}
#navbar {
width:644px;
height:70px;
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
z-index:5;
position:absolute;
line-height:70px;
color:#FFF;
}
#navbar li {
padding-left:21px;
padding-right:20px;
margin:0;
list-style:none;
float:left;
position:relative;
width:auto;
display:block;
text-align:center;
vertical-align:middle;
color:#4F1700;
text-decoration:none;
z-index:5;
}
#navbar li:hover {
background:url(img/hover.jpg);
z-index:5;
font-style:italic;
color:#4F1700;
}
答案 0 :(得分：0)
您必须使身体适合视口。您可以通过将以下css分配给body来完成此操作。
body {
position: fixed;
top: 0;
left: 0;
bottom: 0;
}
我知道，这不是最好的方法，但这是我能够快速看出来的。希望这有帮助
答案 1 :(得分：0)
你做了什么
你玩过div的zindexes并且玩错了..
让我们看看你的代码：
您的div id = "box"有一个z-index 1，而其包含所有文字的子div有z-index作为z-index:3，在这种情况下，其高度为id = "box"文本div将增加，然后其父div margin-left:350px;的高度不会随之增加...我删除了＆＃34;文本＆＃34;的z-index。 div并给它一个style = "min-height: 30px; word-break: word-wrap; float: left; margin-left: 350px;"
并且它现在完美...现在你可以在任何分辨率下打开它放大或缩小它...它不会剪辑或破坏...事实上尝试添加更多文本div的大小会增加......
将此添加到您的文字div
{{1}}
并删除其z-index和绝对属性..
更改div的z-index时要小心......
答案 2 :(得分：-1)
问题是#main的宽度为100％，当窗口大小缩小时，宽度可能小于#content的宽度。 #content的左边距为-500px，因此当宽度小于1000px时，它会向左移动。
将min-width:1000px添加到#main，您就可以在低于1000px的任何内容中进行滚动。