这是我在CSS，HTML和PHP编程的第一周。我意识到在开始我的网站时，当我按窗口大小缩放我的网站时，所有文本都会重叠，导致问题并且看起来很糟糕。
我想知道我是否可以得到一个明确的答案我正在做的可怕的错误。我已经尝试了媒体查询等方法，但我仍然根本不理解它。
这是我的代码：
/* Reset body padding and margins */
body {
margin: 0px;
padding: 0px;
}
/* Make Header Sticky */
#header_container {
background: black;
border: 1px solid #666;
height: 40px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 5px;
margin: 10px;
auto: width:940px;
text-align: left;
}
#headertext {
font-family: "sans-serif";
size: 20px;
padding: 2px;
font-size: 120%;
text-decoration: none;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: auto;
overflow: auto;
padding: 80px;
width: 100%;
height: auto;
}
#content {}
/* CSS FOR HOME PAGE CONTENTS */
#hometext {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5em;
left: 4em;
color: #585858;
margin-right: 850px;
}
#hometext2 {
font-family: "arial";
padding: 10px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 7em;
left: 4.24em;
color: #585858;
margin-right: 1200px;
}
#hometext3 {
font-family: "arial";
padding: 1px;
font-size: 100%;
text-decoration: none;
position: absolute;
top: 5m;
left: 65em;
color: #585858;
margin-right: 0;
}
#hometext4 {
font-family: "arial";
padding: 18px;
font-size: 80%;
text-decoration: none;
position: absolute;
top: 10m;
left: 80em;
color: #585858;
margin-right: 0;
}
#home_container<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<title>replay.sc</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a:link {
color: grey;
}
a:visited {
color: grey;
}
a:hover {
color: white;
}
a:active {
color: grey;
}
text-decoration: none;
}
}
</style>
</head>
<body font="sans-serif" id="container">
<!--- BEGIN: STICKY HEADER -->
<div id="header_container">
<div id="header">
<p><a id="headertext" a href="replay.sc"> replay.sc </a>
<p>
</div>
</div>
<!-- END: STICKY HEADER -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
</div>
</div>
<!-- END: Sticky Footer -->
<div id="home_container">
<h1 id="hometext"> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p id="hometext2"> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
<h1 id="hometext3"> Upload a replay pack here to generate a page containing download links for every replay or for a .rar file of every replay. </h1>
<p id="hometext4"> Only basic information for each replay will be made to conserve server load. </p>
</div>
</body>
</html>
答案 0 :(得分：5)
您错误地混合了相对和绝对测量值。如果您是初学者，我建议先坚持一种测量模型，然后逐步学习如何使用其他模型。
例如，Stack Overflow绝对定位;如果您调整浏览器窗口的大小，则不会调整大小。相对定位的网页可以使内容适应可用的窗口大小。 JSFiddle网站相对定位;它总是利用整个窗口大小。
这两种测量模型都可以产生一个好的网站，但是要创建一个成功的网站，你必须非常熟悉这两种定位方法，以及如何在同一页面中使用时将它们混合以产生各种效果。
许多人认为绝对定位更容易为初学者提供可视化;虽然它有其局限性，但如果你想创建更高级的布局，可以在不同的屏幕尺寸上很好地工作。
如果您想从绝对定位开始，首先要确定整个页面的特定宽度。许多人使用相当窄的像素，这些像素具有大量均匀的可分割性，如960px或800px。要创建一个简单的绝对定位站点，您需要：
position: absolute。例如（edit on jsfiddle或full screen）：
#hometext{
font-family: "arial";
font-size: 100%;
text-decoration: none;
color: #585858;
position: absolute;
top: 80px;
left: 60px;
width: 335px;
height: 60px;
line-height: 20px; /* this ensure that 3 lines of text sums up to 3*20px=60px */
}
如果您尝试缩放网站或者如果您的用户使用不同的窗口大小（他们要么有很多浪费的空间或必须水平滚动），绝对定位网站的缺点很明显。纯粹的绝对定位，网站基本上变得像静态图像。
更现代的最佳做法是使用浮动定位来生成响应性或弹性的网站。为此，您需要了解如何浮动元素和各种布局算法。要制作一个弹性网站，您需要：
例如（edit in jsfiddle或fullscreen）。无可置疑地理解各种布局算法可能会非常困难，但如果你继续使用它来进行各种不同的布局，你最终会自然地得到它。
答案 1 :(得分：0)
尝试我的css ..使用容器来容纳所有东西，当大小容器将做的伎俩...尝试复制我的代码它有一个容器css ..它控制重叠看到。 容器最相对于它不会重叠;;希望它有所帮助 看看#advertisement css id如何做到这一点
<html>
<body>
<div id = "container">
<div id="advertisement">
<img src="Desert.jpg" width="200px" height="200px">
</div>
<div id="transparent">
<img src="black.jpg" width="200px" height="200px">
</div>
<div id="regularborder">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
<img src="Desert.jpg" width="200px" height="200px">
</div>
</div>
</body>
</html>
<style>
#container{
position:relative;
}
#advertisement{
z-index:-1;
border-left: solid;
}
#transparent
{
opacity:0.4;
filter:alpha(opacity=40);
position:absolute;
left:0px;
top:0px;
}
#regularborder{
border-style:solid;
}
</style>
答案 2 :(得分：0)
在CSS中尝试这样的事情。
#wholepage { position:absolute; margin:0px; width:100%; }
答案 3 :(得分：0)
如果您想要响应，请尝试这样
CSS
.header{background-color:#000;color:#fff;width:100%;min-height:40px;}
a{color:#fff;font-size:120%;line-height:2em;margin:10px;}
h1{ color: #585858; font-family: "arial";font-size: 100%;line-height: 20px;}
p{margin-top:1em;font-family: "arial";font-size:80%;color:#585858;}
.table{display:table;width:55%;margin:0 auto;}
.row{display:table-row;}
.cell{display:table-cell;padding:2em;width:50%;}
HTML
<div class="header">
<a href="/" id="headertext"> replay.sc </a>
</div>
<div class="table">
<div class="row">
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> When the page is generated you will have the option to select which information on the replay you want to display to the public, if you are logged in you will be able to edit this in the future.</p>
</div>
<div class="cell">
<h1> Upload your replay here to generate a page containing a download link and various information on the replay. </h1>
<p> Only basic information for each replay will be made to conserve server load. </p>
</div>
</div>
</div>
根据需要设置内容的边距，填充
答案 4 :(得分：0)
如果您希望内容的行为可预测，那么真正的响应能力才能真正实现。因此，您可以将媒体查询应用于您的网站，以获得特定尺寸的屏幕。 @media screen和{max-width:400px}{.....}这意味着最大宽度为400px，请像这样处理内容。因此，您的内容行为将包含在{....}中。这将利用您的时间尝试除Internet Explorer之外的多个浏览器，并且有一个解决方案：
IE8 - 我认为不支持媒体查询，因此您只需从其开发者网站添加名为respond.js的JavaScript文件即可。
参考：
答案 5 :(得分：0)
您可以使用vw和vh单位：
font-size: 1vw /* = 1% of viewport width */
font-size: 1vh /* = 1% of viewport height */
font-size: 1vmin /* = 1vw or 1vh, whichever is smaller */
font-size: 1vmax /* = 1vw or 1vh, whichever is larger */
参考：