所以我需要帮助解决的问题是我的#pagewrap的高度设置为大约820px（接近那个）并且我的CSS中没有设置高度的任何东西。不幸的是，事实上我在我的网页上的javascript动态地自动调整页面高度，我无法设置最大高度，因为这会弄乱我的其他页面。我已经为其他对象尝试了许多其他最大高度，但我知道它是#page-wrap。即使是，javascript确实会改变页面高度。我在其他网站上使用过它，我认为这不是问题所在。我认为那是另一回事。那是什么我不知道，否则我不会首先提出这个问题
这是我的HTML：
<!doctype html>
<html>
<head>
<title>Anna at Nourish</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="js/dynamicpage.js"></script>
<script type="text/javascript">
window.onload = function() {
var audioEl = document.getElementById("audioTag");
audioEl.load();
audioEl.play();
};
</script>
<script type="text/javascript">
if (screen.width <= 700) {
window.location = "http://m.757stylist.com";
}
</script>
<script type="text/javascript">
if(/Android|webOS|iPhone|iPod|BlackBerry/IEMobile/i.test(navigator.userAgent)){
if(document.URL !="http://www.757stylist.index.html")
{
window.location ="http://m.757stylist.com/index.html";
}
}
</script>
<meta name="description" content="Amazing Master Hair Stylist Anna Wenke Now at Nourish Day Spa,
Providing The Best in Cuts, Color, & Keratin-Treatments
Anna At Nourish is located in the newly remodeled Nourish Day Spa, a Luxe Spa on Shore Drive in Virginia Beach one block from the Lesner Bridge.
By Appointment Only
(757) 777-4901
757stylist@gmail.com"><meta name="keywords" content="Anna Wenke,757,stylist,hair,757 stylist,anna,wenke,hair,hair cuts,beauty salon,salon"><meta name="robots" content="follow,index"></head>
<body>
<div id="hideme">
<audio id="audioTag" controls loop>
<source src="sound/background.mp3">
</audio>
</div>
<div id="page-wrap">
<header id="top-nav">
<nav>
<ul class="group">
<li id="head-image"><a href="index.html"><img src="images/mainimages/logo.png" alt="Anna at Nourish Logo" height="150"></a></li>
<li id="home-link"><a href="index.html">Home</a></li>
<li id="about-link"><a href="about.html">About</a></li>
<li id="contact-link"><a href="unavailable.html">Products</a></li>
</ul>
</nav>
<li id="appointment-link"><a class="typeform-share link" href="https://jr8.typeform.com/to/d8NSmy" data-mode="1" target="_blank">Request An Appointment</a>
<script>(function(){var qs,js,q,s,d=document,gi=d.getElementById,ce=d.createElement,gt=d.getElementsByTagName,id='typef_orm',b='https://s3-eu-west-1.amazonaws.com/share.typeform.com/';if(!gi.call(d,id)){js=ce.call(d,'script');js.id=id;js.src=b+'share.js';q=gt.call(d,'script')[0];q.parentNode.insertBefore(js,q)}})()</script></li>
<p id="contact-info"><a href="tel:(757) 777-4901">(757) 777-4901</a><br><a href="mailto:757stylist@gmail.com">757stylist@gmail.com</a><br>Mon-Sat: By Appointment<br>3700 Shore Drive, Suite 105, VA Beach</p>
<img src="images/mainimages/bio-pic.png" width="100px" height="100px" style="position: relative; top: -335px; left: 440px;">
</header>
<section id="main-content">
<div id="guts">
<div id="home-wrap">
<iframe height="440px;" width="850px" src="slicebox/index.html" style="border: 0px; position: relative; top: 10px; left: 45px; max-height: 440px; max-width: 850px; overflow: hidden;" scrolling="no"></iframe>
<div id="footer"><a href="https://www.facebook.com/pages/Anna-at-Nourish/339918796198673" id="face-link"><img src="images/mainimages/facebook.png" alt="facebook logo" height="64px" width="64px" style="position: relative; top: 25px; left: -5px; font: 40px bold;">Like Us On Facebook!</a><a href="http://www.jrtech12.com" style="position: relative; left: 300px; top: -35px; font: 20px bold;">This Website Was Created <br><p style="position: relative; left: 420px; top: -20px; font: 20px bold;">By JR Tech - ©2015</p></a></div>
</div>
</div>
</section>
</div>
</body>
</html>
这是我的CSS：
body {
overflow-y: scroll;
background:url(../images/browser/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height: 775px;
}
#page-wrap {
margin: 0 auto;
display: block;
width: 945px;
position: relative;
top: -40px;
max-width: 945px;
overflow: hidden;
}
ul {
list-style-type: none;
font: bold 28px Arial, Helvetica, sans-serif;
}
ul a {
color: rgba(35,35,35,1.0);
position: relative;
display: block;
text-align: center;
}
nav {
text-align: center;
}
nav ul {
align-content: center;
}
nav ul li {
display: inline;
}
a:hover, a.hover {
color: rgba(109,109,109,1.0) !important;
}
a:visited, a.visited {
color: rgba(35,35,35,1.0);
}
a {
color: rgba(35,35,35,1.0);
}
#top-nav {
position: relative;
display: block;
width: 933px;
height: 225px;
background: rgba(256,256,256,0.5);
border: 6px solid rgba(87,119,140,1);
display: block;
overflow: hidden;
}
#head-image {
position: relative;
top: 5px;
left: -280px;
z-index: 3;
}
#home-link {
top: 0px;
position: relative;
max-width: 100px;
width: 100px;
left: -10px;
display: block;
}
#about-link {
top: -32.5px;
position: relative;
width: 120px;
left: 150px;
display: block;
}
#contact-link {
top: -64px;
position: relative;
width: 100px;
left: 350px;
display: block;
}
#appointment-link {
position: relative;
top: -100px;
width: 350px;
top: 29px;
display: block;
left: 570px;
font: bold 28px Arial, Helvetica, sans-serif;
}
#contact-info {
position: relative;
text-align: right;
top: -170px;
left: 400px;
font-size: 28px;
font: bold 28px Arial, Helvetica, sans-serif;
color: rgba(35,35,35,1.0);
text-decoration: none;
width: 520px;
}
#home-wrap {
height: 560px;
margin: 0 auto;
content-align: center;
}
#footer {
position: relative;
top: 20px;
background: rgba(256,256,256,0.5);
border: 6px solid rgba(87,119,140,1);
height: 70px;
}
#face-link {
font: 35px bold;
position: relative;
left: 15px;
top: -20px;
}
.group {
max-height: 100px;
}
#about-wrap {
position: relative;
top: 10px;
}
#about-us {
background: rgba(256,256,256,0.7);
border: 6px solid rgba(211,211,211,0.2);
font-size: 25px;
color: rgba(35,35,35,1);
font: bold;
top: 0px;
}
#about-info {
position: relative;
top: -25px;
padding-left: 5px;
height: 350px;
}
#hideme {
display: none;
position: relative;
top: 300px;
z-index: -5;
}
#unavailable-wrap {
position: relative;
top: 10px;
}
#coming-soon {
background: rgba(256,256,256,0.6);
color: rgba(35,35,35,1);
width: 933px;
height: 50px;
font: bold 28px Arial, Helvetica, sans-serif;
border: 6px solid rgba(211,211,211,0.2);
}
以下是该网站的实时版本： http://www.757stylist.com/example/index.html
如果你能给我一些帮助，我会非常感谢你的帮助。
答案 0 :(得分：0)
/js/dynamicpage.js中的代码将内联高度规则设置为pagewrap元素：
$pageWrap.height($pageWrap.height());
它没有多大意义，因为它计算元素的当前高度并将其添加为内联样式。
由于您的问题不明确（事实上，毫无疑问），我无法为您提供更多帮助，但这就是高度的来源。除此之外，您的页面包装元素无论如何都没有固定的高度 - 它总是会扩展其子元素所需的数量。