我正在尝试使用 HTML 和 CSS 制作一个组合类型的东西，我的布局在我的 1920 * 1080 分辨率下看起来非常好，但是当我改变分辨率时，一切都会移动，一切看起来都很糟糕。
任何人都可以指出我的代码哪里出了问题并为我提供解决问题的方法吗？
--- 编辑新代码
它在 1920 * 1080 上的外观: http://screencast.com/t/mq8H3baBxIi
所以我已经更改了建议的内容，但我仍然明白，例如，当我将屏幕分辨率从 1920 * 1080 更改为 1280 * 1024 以测试它的外观时，评论区域会拉到灰色之上“联系我”框，以便它最终像我在这个链接上的图片一样: http://screencast.com/t/xZEwSgwdqP
<html>
<head>
<link rel="stylesheet" type="text/css" href="portfolioStyles.css" />
</head>
<body>
<div id="pageTitleContact"> CONTACT ME</div>
<div id="sideBar"> </div>
<div id="commentSideBar"> </div>
<div id="logos">
<ul>
<div id="home"><li><a href="portfolioHome.html"><img src="home.png" alt="list item 1" /></a></li></div>
<div id="aboutMe"><li><a href="portfolioAboutMe.html"><img src="aboutMe.png" alt="list item 2" /></a></li></div>
<div id="achievements"><li><a href="portfolioAchievement.html"><img src="achievement.png" alt="list item 3" /></a></li></div>
<div id="hobbies"><li><a href="portfolioHobbies.html"><img src="Hobbies.png" alt="list item 4" /></a></li></div>
<div id="contactMe"><li><a href="portfolioContactMe.html"><img src="contactMeHighlighted.png" alt="list item 4" /></a></li></div>
</ul>
</div>
<textarea id="contactMeTextarea">
</textarea>
<div id="Commentsection">
<form action="postcommentandreturn.php" method="post">
<div id="nameAreaTitle">
Name:</div><input type="text" id="nameArea" name="name" />
<br>
<textarea placeholder="Insert Comment Here..." type="text" id="commentArea" name="comment"></textarea>
<div id="submitLocation"><input type="submit" id="submitComment" value="Submit"/></div>
</form>
</div>
<!--comment section-->
<div id="postedComments">
<tr>
<td><div id="postersName"> </div>
</td>
</tr>
<tr>
<td><div id="commentDate"></div></td>
</tr>
<tr>
<td>
<textarea id="postersComment"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
CSS:
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}
#sideBar {
background-color: #111111;
width:100px;
height:100%;
position:fixed;
z-index:-1;
}
#commentSideBar {
background-color: #111111;
width:300px;
height:100%;
position:fixed;
z-index:-1;
right:0;
}
#logos {
position:absolute;
margin-left:-20px;
}
#home {
margin-top:50px;
}
#homeInfo {
resize: none;
position:fixed;
display: block;
height:400px;
width:800px;
overflow:hidden;
outline:none;
background-color:#3f3f3f;
color:white;
font-family:Arial;
font-size:30px;
border-radius:10px;
font-weight:700;
text-align:left;
padding-right:20px;
padding-left:40px;
top: 50%;
left: 50%;
max-width:800px;
margin-left:-350px;
margin-top:-200px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
#pageTitleContact {
position:fixed;
top: 50%;
left: 50%;
margin-top:-400px;
margin-left:-400px;
color:limegreen;
font-size:100px;
font-family:Arial;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
padding-left:20px;
padding-right:20px;
}
#aboutMe {
margin-top:100px;
}
#achievements {
margin-top:100px;
margin-left:-7px;
}
#hobbies {
margin-top:100px;
}
#contactMe {
margin-top:100px;
margin-bottom:50px;
}
#contactMeTextarea {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
resize: none;
position:fixed;
display: block;
height:600px;
width:1000px;
max-width:1000px;
outline:none;
background-color:#3f3f3f;
color:whitesmoke;
font-family:Arial;
font-size:30px;
border-radius:10px;
text-align:left;
padding-right:20px;
padding-left:40px;
top: 50%;
left: 50%;
margin-left:-500px;
margin-top:-300px;
padding-top: 50px;
}
#Commentsection {
position:fixed;
top:50%;
margin-left:140px;
margin-top:-300px;
}
#nameAreaTitle {
font-family:Arial;
color:black;
font-weight:bold;
}
#nameArea {
font-family:Arial;
color:black;
width:300px;
height:40px;
font-size:30px;
}
#commentArea {
font-family:Arial;
color:black;
width:300px;
height:300px;
resize: none;
margin-top:10px;
font-size:20px;
}
#submitComment {
width:100px;
font-size:20px;
}
#postedComments{
position:absolute;
right:0px;
margin-top:10px;
margin-right:10px;
width:280px;
background-color:grey;
}
#postersName {
width:260px;
height:25px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
font-weight:bold;
margin-top:10px;
}
#commentDate {
width:260px;
height:25px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
}
#postersComment {
width:275px;
height:200px;
font-size:20px;
font-family:Arial;
background-color:white;
color:black;
border-color:black;
border-width:1px;
border-style:solid;
padding-left:10px;
resize:none;
}
li {
list-style-type:none;
}
最佳答案
无需仔细查看，您可以添加一个容器 div 或将所有代码包装起来的东西，然后分配一个 min-width 属性以确保它永远不会小于给定尺寸。
您的布局似乎取决于您的 body 的宽度，并且随着窗口大小的变化，您的 body 的宽度也会发生变化。具有 min-width 或声明的 width 的包装器将使它在用户的窗口小于容器宽度时出现水平滚动条。
正如其他人所说，您有一些嵌套问题。一般页面布局如下所示:
<html>
<head>
<!-- Head Content -->
</head>
<body>
<!-- Page Content -->
<ul>
<li><!-- List Item --></li>
<li><!-- List Item --></li>
</ul>
</body>
</html>
关于css - HTML、CSS : Why does my layout mess up on different resolutions?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15887921/