好吧，我对每个页面都有这个问题。我不确定我做错了什么，但我的所有页面都不适用于每个分辨率。可能是因为我使用宽屏？大声笑我不确定，但它看起来永远不会在比宽屏幕分辨率小的分辨率上看起来正确。你看不到它的一部分，所以你必须滚动到一边或在这种情况下内容延伸比div更久。一个例子是larzconwell.com
所以继承代码。如果你能帮助我解决这个问题，我将不胜感激。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Tinos' rel='stylesheet' type='text/css'>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script>
<title>Larz Conwell</title>
<style>
/* standard */
body {
background-color: #333;
color: #ccc;
font-family: 'Tinos', arial, serif;
}
a:link {
color: #CCC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCC;
}
a:hover {
text-decoration: none;
color: #09F;
}
a:active {
text-decoration: none;
color: #09F;
}
textarea {
resize: none;
}
/* classes */
.dash {
font-size:20px;
color:#09F;
}
.header {
z-index:1;
float:left;
background:#666;
margin-left:25px;
margin-top:75px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
width:31%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.9;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}
.menu {
z-index:3;
float:right;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:15px;
padding-left:25px;
padding-right:5px;
width:27%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.menuname {
color:#09F;
font-size:20px;
}
.content {
z-index:2;
float:left;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:50px;
padding-top:25px;
padding-left:25px;
padding-right:5px;
padding-bottom:25px;
width:60%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.linkletter {
color: #09F !important;
font-size:50px !important;
}
.linkletter:hover {
color:#000 !important;
font-size:50px !important;
}
.links {
font-size:35px !important;
}
.links:hover {
font-size:35px !important;
color:#000 !important;
}
.footer {
z-index:2;
float:left;
background:#666;
margin-left:25px; /*only applies if floating left */
margin-right:25px;
margin-top:20px;
margin-bottom:20px;
padding:10px;
width:31%;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
box-shadow: 5px 5px 2px #000;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<!--disables rightclick-->
<script language=JavaScript>
<!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="Function Not Allowed -Larz Conwell";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
<script>
$(document).ready(function() {
$('div').hide().fadeIn(3500);
$(".header").draggable();
});
$(document).ready(function() {
$(".menu").draggable();
});
$(document).ready(function() {
$(".content").draggable();
});
$(document).ready(function() {
$(".footer").draggable();
});
</script>
</head>
<body>
<!--header area: logo-->
<div class="header">
<p><img src="images/logo.png" width="437" height="158" alt="Larz Conwell" /></p>
<p><span class="dash">//</span>Web Designer & Graphic Artist</p>
</div>
<!-- menus-->
<div class="menu">
<p>Note right now the Portfolio portion of the website does not work and is in progress.</p>
<p class="menuname"> //Portfolio</p>
<p><span class="dash">//</span><a href="pages/photography.html">Photography</a> <span class="dash">//</span><a href="pages/photoshop.html">Photoshop Creations</a> <span class="dash">//</span><a href="pages/design.html">Designs</a></p>
</div>
<!--content-->
<div class="content">
<table width="100%" border="0">
<tr>
<td width="36%" valign="top"><img src="images/about.png" width="251" height="81" alt="About" /><br />
Hello I'm Larz Conwell and i reside in Georgia, I am a Freelance Web Designer and Graphic Artist. As of right now i am a senior in high school and i am working on getting better at Web Design as well as Graphic Design. If you would like a web site made or editing done please ask i would love to help, and since im only in high school, for now im doing anything for free. <br /></td>
<td width="23%" valign="top"><img src="images/contact.png" width="251" height="81" alt="Contact" />
<form id="form1" name="form1" action="/cgi-bin/cgiemail" method="post" enctype="application/x-www-form-urlencoded">
<table width="100%" border="0">
<tr>
<td height="32" align="right" valign="top">Name</td>
<td valign="top"><label for="name"></label>
<input name="name" type="text" id="name" /></td>
</tr>
<tr>
<td height="31" align="right" valign="top">E-mail</td>
<td valign="top"><label for="email"></label>
<input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td height="30" align="right" valign="top">Comment</td>
<td valign="top"><label for="comment"></label>
<label for="comment"></label>
<textarea name="comment" id="comment" cols="21" rows="5"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center" valign="top"><input type="submit" name="submit" id="submit" value="Contact Me" /> <input type="reset" name="reset" id="reset" value="Reset" /></td>
</tr>
</table>
</form></td>
<td width="41%" valign="top"><img src="images/qa.png" width="251" height="81" alt="Questions & Answers" /><br />
Q: Why should i pick you to make my website?<br />
A: I am able to make your website however you want and i have good design techniques so it will look great and also have great functionality at the same time.<br />
<br />
Q: Why would you make content for people for free?<br />
A: Mainly because im in high school and i dont have "proper" training, so i feel i should do it for free till i get out of college. Plus, who doesnt like free stuff? </td>
</tr>
<tr>
<td colspan="3" align="center"><span class="linkletter">F</span><a href="http://facebook.com/larz.conwell"><span class="links">acebook</span></a> <span class="linkletter">E</span><a href="mailto:larzconwell@gmail.com"><span class="links">-mail</span></a></td>
</tr>
</table>
</div>
<!--footer-->
<div class="footer"><span class="dash">//</span>©2011 All Rights Reserved Larz Conwell <a href="mailto:larzconwell@gmail.com">E-mail</a></div>
</body>
</html>
提前谢谢你（：
答案 0 :(得分：2)
在每个div元素上，您设置了百分比宽度，这意味着当浏览器窗口小于某个宽度时，您的div也将调整大小并且div的内容将会丢失。这可以通过用像素值替换百分比宽度来解决，您可以尝试这样做： 正确：
不正确（导致浏览器调整大小问题）：
答案 1 :(得分：0)
每位设计师都面临这个问题， 我建议你制作2个css文件，一个用于resoulution 800X1024，另一个用于宽， 并编写代码来检测分辨率并输出所需的CSS， 试试这个，看看
我不确定但是试试这个剧本
<script type="text/javascript">
function getcss(cssfile){
loadcss = document.createElement('link')
loadcss.setAttribute("rel", "stylesheet")
loadcss.setAttribute("type", "text/css")
loadcss.setAttribute("href", cssfile)
document.getElementsByTagName("head")[0].appendChild(loadcss)
}
if(screen.width <= '800')
// Defines the resolution range you're targeting (less than 800 pixels wide in this case)
{
getcss('800x600.css')
// Defines the .css file you want to load for this range (800x600.css)
}
else if(screen.width > '800' && screen.width < '1280')
// This time we're targeting all resolutions between 800 and 1280 pixels wide
{
getcss('1024x768.css')
//And we want to load the .css file named "1024x768.css"
}
else if(screen.width > '1024' && screen.width < '1600')
//Targeting screen resolutions between 1024 and 1600px wide
{
getcss('1280x1024.css')
//Load 1280x1024.css
}
else
{
getcss('1280x1024.css')
//This else statement has "if" condition. If none of the following criteria are met, load 1280x1024.css
}
</script>