过去几周我一直在网页上工作，我的桌面版本已经完成。目前我正在为移动网站制作样式表。但我遇到了一个问题，内容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>
答案 0 :(得分：2)
将此添加到HTML页面的头部
<s:complexType name="parent">
<s:sequence>
<s:element name="elem1" type="s:string"/>
<s:element name="elem2">
<s:simpleType>
<s:restriction base="s:string">
<s:pattern value="if (elem1 == 3) //todo
else //todo"/>
</s:restriction>
</s:simpleType>
</s:element>
</s:sequence>
</s:complexType name="parent">