我过去几周一直在为一个网页工作，桌面版已经完成了。目前我正在为移动站点编写样式表。但是，我遇到了一个问题，内容div无法调整为屏幕宽度。我已经检查了所有的宽度标签和最大宽度标签，都设置为100%而不是确切的屏幕大小。我还使用JS获取窗口大小，在我的测试设备上宽度为540px; 但是div标签的大小为980px。我包含了重置CSS样式表，并确保它不影响大小。我注意到使用position:fixed可以使其正确大小，但是它无法滚动。以下是样式表和HTML代码。如果我的代码不太好，请谅解，我是一名应用程序员，而不是网页设计师。如果有任何建设性的批评，也将不胜感激。
http://jsfiddle.net/justinclev/ma63f3vo/
html, body { height:100%; width:100%;}
body {
background-color:#131720;
font-family: 'helvetica';
text-align:justify;
text-justify:inter-word;
}
.Header {
z-index:95;
position:relative;
width:100%;
height: 35px;
background-color: #039de3;
/*
background: #5078CC; /* Old browsers
background: -moz-linear-gradient(top, #D93F3F 0%, #FF4040 90%, #4C2020 100%); /* FF3.6+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D93F3F), color-stop(90%,#FF4040), color-stop(100%,#4C2020)); /* Chrome,Safari4+
background: -webkit-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* Opera 11.10+
background: -ms-linear-gradient(top, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* IE10+
background: linear-gradient(to bottom, #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* W3C
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D93F3F', endColorstr='#4C2020',GradientType=0 ); /* IE6-9 */
}
.Header .Title {
float:left;
width:auto;
margin-left:1%;;
position: absolute;
bottom:5px;
font-size: 20px;
color: white;
}
.Container {
position:fixed;
height:auto;
margin-top:65px;
margin-bottom:70px;
}
.Content {
overflow:auto;
min-height: 100%;
background-color:white;
box-shadow: 15px 0 21px -10px black, -15px 0 21px -10px black;
}
.linkButton {
font-family: 'Roboto', cursive;
background: none;
border: none;
font-size: 16px;
color: #ED5555;
text-decoration: none;
cursor: pointer;
}
.HomePageText {
margin:1%;
width:60%;
float:left;
font-size:8px;
}
/*
*
*
* Header
*
*/
.heading {
font-family: 'Roboto', sans-serif;
width: 100%; /* Spans the width of the page */
height: 60px;
z-index:98;
position: fixed;
top: 0px;
background-color:#131720;
/*
background: #5078CC; /* Old browsers *
background: -moz-linear-gradient(top, #063497 0%, #5078CC 90%, #022162 100%); /* FF3.6+ *
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#063497), color-stop(90%,#5078CC), color-stop(100%,#022162)); /* Chrome,Safari4+ *
background: -webkit-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* Chrome10+,Safari5.1+ *
background: -o-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* Opera 11.10+ *
background: -ms-linear-gradient(top, #063497 0%,#5078CC 90%,#022162 100%); /* IE10+ *
background: linear-gradient(to bottom, #063497 0%,#5078CC 90%,#022162 100%); /* W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063497', endColorstr='#022162',GradientType=0 ); /* IE6-9 */
}
.BlueBarHeader {
font-family: 'Roboto', sans-serif;
width: 100%; /* Spans the width of the page */
height: 40px;
z-index:98;
position: fixed;
top:25px;
-webkit-box-shadow: 0px 7px 10px 1px rgba(19,23,32, 0.95);
-moz-box-shadow: 0px 7px 10px 1px rgba(19,23,32,0.95);
box-shadow: 0px 7px 10px 1px rgba(19,23,32,0.95);
background-color:#006694;
background: #006694; /* Old browsers */
}
.Logo {
font-size: 24px;
color: white;
position: absolute;
bottom: 10px;
left: 5px;
}
/*Login Style info */
.Login{
position: absolute;
top: 0px;
right:0;
height:25px;
padding-top:5px;
padding-left: 10px;
padding-right:5px;
color: white;
font-size: 15px;
}
.Login a {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
text-decoration: none;
}
.Login a:hover {
text-decoration:underline;
color: white;
}
#LoginLink {
display: inline-block;
}
/*
* Footer
*
*/
footer{
position:relative;
display:block;
z-index: 99;
width: 100%;
height:50px;
bottom: 0px;
right:0;
padding-top:0px;
color:white;
background-color:#131720;
/*background: #FF4040; /* Old browsers *
background: -moz-linear-gradient(top, #063497 0%, #5078CC 90%, #063497 100%); /* FF3.6+ *
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#063497), color-stop(90%,#5078CC), color-stop(100%,#063497)); /* Chrome,Safari4+ *
background: -webkit-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* Chrome10+,Safari5.1+ *
background: -o-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* Opera 11.10+ *
background: -ms-linear-gradient(top, #063497 0%,#5078CC 90%,#063497 100%); /* IE10+ *
background: linear-gradient(to bottom, #063497 0%,#5078CC 90%,#063497 100%); /* W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063497', endColorstr='#063497',GradientType=0 ); /* IE6-9 */
}
.footer{
display:block;
z-index: 99;
width: 100%;
height:35px;
bottom: 20px;
right:0;
padding-top:10px;
font-family: 'Roboto', sans-serif;
text-align:center;
font-size:20px;
color:white;
background-color:#006694;
}
footer a{
text-decoration:none;
font-style:italic;
color:white;
}
footer a:hover {
text-decoration:underline;
}
网页
<?php
include_once '/includes/db_connect.php';
include_once '/includes/functions.php';
sec_session_start();
if (login_check($mysqli) == true) {
$logged = 'in';
} else {
$logged = 'out';
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Imagine That</title>
<?php
include_once '/includes/includes.php';
?></head>
<body>
<div class="Content">
<div class="Container">
<div class="Header">
<div class="Title">Welcome to the Imagine That website!</div>
</div>
<div class="HomePageText">
This site is dedicated to furthering my knowledge of coding as well as web design. If you take a look around which I hope you will.
You will notice that I have quite a bit of features in this site that aren't necessary and some that may just seem obsurd for a digital Portfolio.
Well before you leave thinking I've gone mad and don't know what I'm doing. Allow me to explain the method to my madness, because trust me there is one.
This site has two purposes. The first is to be a digital portfolio displaying my knowledge of code and different projects I have created.
The second is to be a playground for my imagination to come up with new and cool things. To keep it simple this is a digital porfolio displaying all the things that I have learned about web design and coding.
Some of these features can only be accessed by creating a account, Now I know what your thinking. Why should I create a account to such a small website for one guy that serves no purpose for me. Well, To be frank this site does serve a purpose to not only I, but also the new developer looking for source code on odd projects. The projects I post on here will include either their full source code or small fragments for the complicated parts of the program. I will go over a bit of it to teach beginners how to create and do the things I have created already.
So again bare with me and create an account. It's easy and won't take you much time. After that feel free to look around and explore my creation.
</div>
<div style="width:37%; height:100%; float:right;">
<img style="width:95%; height:auto;margin:0 auto; margin-top: 15px;" src="Photos/307470_2505425680003_1303200128_n.jpg" />
</div>
</div>
</div>
<?php
include_once 'Footer.php';
?>
</body>
</html>