擴展身體背景圖片/身體不如html高
[英]Extend body background image/body not as tall as html
問題描述
我有兩個背景圖片，一個在html上，另一個在正文上。 但是由於某種原因，人體並沒有像應該那樣伸展到窗戶的整個高度。 或者，更具體地說，大約...大約50像素的空間，人體的BG無法顯示。 我在內容底部確實有一個50px的邊距（似乎沒有顯示，但是沒什么大不了的），但是我刪除了它，但問題仍然存在。 您可以在這里看到問題。 我不太清楚為什么。 有任何想法嗎？ 也許我缺少一些基本的東西...
編輯：
我有，是的。 我以為HTML Image可能太大了，它不想過度拉伸身體的圖像，但這沒有任何意義。
我本打算發布代碼，但手頭沒有代碼。 現在是這里：
<!DOCTYPE HTML PUBLIC "-///W3C///DTD HTML 4.01 Transitional///EN" "http:///www.w3.org/TR/html4/loose.dtd">
<head>
<script type="text/javascript" src="../_script/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="../_script/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="../_script/jquery.fancybox-1.3.4.css" type="text/css" />
<link rel="stylesheet" href="../_script/page_photo.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("a.single_image").fancybox();
});
</script>
<style type="text/css">
/*v Reset v*/
html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img,
small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option
{ margin: 0; padding: 0; border: 0; outline: 0;
text-align: left; vertical-align: middle;
text-decoration: none; list-style: none;
}
/*^ Reset ^*/
html
{ height: 100%; min-width: 1000px;
background: url("../_images/Wall.jpg");
margin: 0; padding: 0;
}
body
{ height: 100%; min-width: 1000px;
background: url("../_images/NAV_BG-HALF.png") repeat-y;
font: 300 12px/22.0px Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
color: #bdb798;
}
a:link { color: #bdb798; text-decoration: none; }
a:visited { color: #333333; text-decoration: none; }
a:hover { color: #d8e5c2; text-decoration: none; }
a:active { color: #a5a49f; text-decoration: none; }
#nav a:link { color: #bdb798; text-decoration: none; }
#nav a:visited { color: #9e9c7a; text-decoration: none; }
#nav a:hover { color: #d8e5c2; text-decoration: none; }
#nav a:active { color: #9e9c7a; text-decoration: none; }
#header
{ height: 80px;
margin-bottom: 50px; padding: 10px;
background: #2e2d29;
border-bottom: 1px solid black;
background-image: url("../_images/head-bg.png")
}
@import url("constant.css");
#nav
{ width: 119px; height: 528px; /*minus padding+border*/
margin-right: 60px; padding: 10px;
border: 1px solid black; border-left: 0;
background: #2a2727;
*padding: 10px 0 10px /*IE*/
*width: 119px; /*IE*/
float: left;
}
#nav ul { margin: 0 10px; }
#nav hr
{ margin: 5px -10px;
color: #848678;
border: 0; border-bottom: 1px solid black;
*margin: 5px 0 5px 10px;
*width: 99px;
}
#content
{ min-height: 90%; overflow: hidden;
padding: 0 30px;
border: 1px solid black; border-right: 0;
background: #2a2727;
*padding: 0 30px 0 30px; /* ???? */
*font-size: 20px;
}
#content hr
{ margin: 0 -30px;
clear: both;
border-top: 1px solid #010101; border-bottom: 1px solid #4a4a4a;
*margin: 0 0 0 -30px;
*width: 106%;
}
#content .bio
{ width: 70%; max-height: 220px; overflow: auto;
margin: 0 20px 20px 0; padding: 10px;
float: right;
}
#content h2.author { margin: 5px 0; text-align: right; *font-size: 20px; }
#content .bio p { line-height: 1.25; text-align: right; }
#content .work
{ width: 100%; height: 660px; overflow: auto;
padding: 10px;
clear: both;
}
#content .work img { vertical-align: center; border: 4px double grey; }
</style>
</head>
<body>
<div id="header">
<img src="../_images/logo.png" />
</div>
<div id="nav">
Photography
<ul>
<li><a href="google.com">Beth Balmforth</a></li>
<li><a href="google.com">Kristen Popcheff</a></li>
<li><a href="google.com">Krystle Parker</a></li>
<li><a href="google.com">Renee Blanchord</a></li>
<li><a href="google.com">-RESERVED-</a></li>
<li><a href="google.com">-RESERVED-</a></li>
</ul>
<hr />
Poetry
<ul>
<li>Rebecca R. Pierce</li>
<li>Justin Louras</li>
<li>-RESERVED-</li>
</ul>
<hr />
<a href="../about.html">Home</a><br />
<a href="../about.html">About</a><br/>
<a href="../about.html">Submit</a><br />
</div>
<div id="content">
<h2 class="author">Beth Balmforth</h2>
<div class="work">
<img src="-photo-images/beth-balmforth_01.jpg" alt="Get 'em Tiger by Beth Balmforth" title="Get 'em Tiger by Beth Balmforth" />
</div>
<hr />
<div class="bio">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dui odio, pulvinar luctus gravida in, varius ac est. Sed dapibus, felis sed placerat dignissim, urna magna egestas ante, aliquet tincidunt lacus ligula eu dui. Pellentesque pellentesque magna sed tortor ultricies lobortis. Mauris ultrices iaculis est, id vestibulum dolor molestie at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas rhoncus gravida neque, vitae posuere ipsum sodales sed. Cras adipiscing sagittis magna id varius. Quisque ut ligula eget justo volutpat adipiscing quis ut purus. Proin sollicitudin velit ac justo dictum adipiscing. Curabitur at sodales est. Praesent aliquam volutpat est, vel dignissim sapien dignissim non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>
1 個解決方案
解決方案1
1 2010-12-02 21:35:35
您是否嘗試過設置：
html, body {
width:100%;
height:100%;
}
Html 正文背景圖片
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.