我目前正在为我的一个朋友在一个网站上工作，这个朋友在匈牙利经营一家小旅馆。 Here it is.
到目前为止，我对结果感到非常满意。但是，我的问题是，在1440x900的笔记本电脑上查看它或在台式PC上放大时，“盒子”容器的背景被剪切，并且不会延伸到页面底部。
我摆弄各种价值观，但为了我一生，我找不到我犯的错误。也许有人会立即发现它。
这是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;
}最佳答案
你做了什么
您使用了div的zindexes玩错了..
让我们看一下您的代码：
具有id = "box"的div的z-index为1，而包含所有文本的子div的z-index为z-index:3，在这种情况下，文本div的高度将增加，则其父div的高度id = "box"不会随之增加...我已经删除了您的“文本” div的z-index，并为其提供了margin-left:350px;及其完美效果...现在，您可以以任何分辨率打开它，放大或缩小...它不会剪切或折断...事实上，请尝试添加更多文本，并且div的大小会增加...
将此添加到您的文本div
style = "min-height: 30px; word-break: word-wrap; float: left; margin-left: 350px;"
并删除其z-index和absolute属性..
更改div的z索引时请务必小心...