个人中心
gpt4 book ai didi

html - 缩放或降低分辨率时 CSS div 容器背景被剪裁

转载 作者：太空宇宙 更新时间：2023-11-03 19:31:08 25 4
gpt4 key购买 nike

我目前正在为我在匈牙利经营一家小酒店的 friend 开发网站。 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="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#105;&#110;&#102;&#111;&#64;&#107;&#97;&#105;&#115;&#101;&#114;&#97;&#112;&#97;&#114;&#116;&#109;&#97;&#110;&#46;&#104;&#117;"><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 as 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 索引时始终要小心......

关于html - 缩放或降低分辨率时 CSS div 容器背景被剪裁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29610963/

25 4 0
文章推荐： matlab - 在matlab中将单元格转换为数组
文章推荐： python - Tkinter turtle 和线程
文章推荐： c# - 使表单在首次加载时不可见
文章推荐： matlab - 如何加速 Eigen 库的矩阵乘积？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com