我有一个出于娱乐和学习目的而正在开发的网页。这是一个两列布局。我的左栏是固定的，右栏是滚动的。在右栏中，我有一个嵌入视频的 iframe。一切都很好，直到我播放视频然后左栏中的固定位置中断。继承人 js 小提琴对不起图像不起作用。
它在 Firefox 中也可以正常工作，但 Safari 和 Chorome 会中断。
继承人的HTML
<div id="main">
<div id= "main-right">
<div id="banner">
<img src="images/banner.gif" alt="Zombie Apocalypse Survival Guide">
</div>
<div id="right_col">
<h1>Overview of Zombies & the Zombie Apocalypse</h1>
<hr style="border-color: #000000" id="zombie">
<h2>What is a Zombie</h2>
<hr>
<div class="content">
<h3>ZOM-BIE: (Zom'be) n. also ZOM-BIES pl.</h3>
<ul>
<li>An animated corpse that feeds on living human flesh.</li>
<li>A voodoo spell that raises the dead.</li>
<li>A Voodoo snake god.</li>
<li>One who moves or acts in a daze "like a zom- bie." [a word of West African origin]</li>
</ul>
<p><img class="contentImage" src="images/Zombie.jpg" alt="Zombie Picture">A zombie is the recently reanimated corpse of a human. This reanimation is unexplained and for our purpose we don't really care about why. We just need to deal with the result. They are slow moving and mindless but determined. There only goal is to feed. We really have no idea why they crave flesh. Taken one or two at a time they pose no problem to an armed and prepared individual. In groups of four or more, problems can begin to arise. Zombies show no fear, feel no pain, and will never stop, there is not a more determined foe on the face planet. This is what makes them so dangerous, oh and the fact that they can be riddled with bullets and not die.</p>
<p>To kill a zombie you must completely destroy the brain, or sever the spinal cord from the head. Be aware that this method leaves the head still capable of functioning. Meaning if you get close enough it can still bit you and infect you. No amount of damage to other parts of the body will kill a zombie. You can make them almost safe by dismembering them and removing the jaw but if you are going to go to that much effort just end them.
</p>
<h3>How to Kill a Zombie</h3>
<iframe src="http://video.vulture.com/video/Walking-Dead-Kills/player?layout=compact&read_more=1" width="416" height="322" frameborder="0" scrolling="no"></iframe>
</div>
<hr id="zombieApoc" style="border-color: #000000" >
<h2>What is the Zombie Apocalypse</h2>
<hr>
<div class="content">
<p><img src="images/zombie-apocalypse.jpg" alt="Zombie Apocalypse Picture" class="contentImage">This basically means that a zombie plague has taken over the world and society as we know it has collapse on a global scale. Humans are no longer the top of the food chain. All of the modern conveniences like cell phones, electricity, and well, with the failure of electricity that ends of most of the other modern day conveniences. Survival has become the main priority. Over time and with proper planning basic survival may not need to be such a high priority.</p>
<p>Human kind is isolated and in small groups scattered through out the world. In this world people have to be wary of roaming zombies as well as other people. Wealth is no longer contingent on how much money you have, but on what kind of supplies you have. Food, weapons, and location are now what makes you rich. With this there will be groups of people that will want what you have. You will have to be almost as weary of the stranger you meet as of the zombie. If you are part of a group you need to be prepared to defend what you have at all costs. It is a ruff world and no one knows How long it will last for. See <a href="extendedSurvival.htm#duration">Extended Survival</a> for more information regarding the duration of the Zombie Apocalypse.</p>
</div>
<div id="footer">
<div id="footerNav">
<a href="index.htm" style="color: #000000; background: #ffffff;">Home</a> —
<a href="surviveFirstNight.htm">Surviving First Night</a> —
<a href="extendedSurvival.htm">Extended Survival</a> —
<a href="weapons.htm">Weapons</a> —
<a href="humanElement.htm">Human Element</a> —
<a href="refMaterial.htm">Reference / Contact</a>
</div>
<a href="images/imageCitation.pdf">Image Citation</a><br>
Copyright © 2013 Per Larsen<br>
<a href="mailto:jokerfwb@yahoo.com">Per Larsen</a>
</div>
</div>
</div>
<div id="main-left">
<div id="leftLogo">
<img src="images/zombieSurvival.png" alt= "Zombie Survival">
</div>
<div id="left_col">
<div class="menu">
<ul>
<li><a href="index.htm" style="color: #ffffff">Home</a>
<div class="subMenu">
<ul>
<li><a href=index.htm#zombie>What is a Zombie</a></li>
<li><a href=index.htm#zombieApoc>What is the Zombie Apocalyspe</a></li>
</ul>
<br>
</div>
</li>
<li><a href="surviveFirstNight.htm">Surviving First Night</a>
<div class="subMenu">
<ul>
<li><a href=surviveFirstNight.htm#firstNight>What is First Night</a></li>
<li><a href=surviveFirstNight.htm#prepared>Prepare/Planning</a></li>
<li><a href=surviveFirstNight.htm#survivalKit>Zombie Survival Kit</a></li>
<li><a href=surviveFirstNight.htm#group>Form a Group</a></li>
</ul>
<br>
</div>
</li>
<li><a href="extendedSurvival.htm">Extended Survival</a>
<div class="subMenu">
<ul>
<li><a href=index.htm#zombie>What is a Zombie</a></li>
<li><a href=index.htm#zombieApoc>What is the Zombie Apacolyspe</a></li>
</ul>
<br>
</div>
</li>
<li><a href="weapons.htm">Weapons</a>
<div class="subMenu">
<ul>
<li><a href=weapons.htm#melee>Melee Weapons</a></li>
<li><a href=weapons.htm#firearms>Firearms</a></li>
<li><a href=weapons.htm#projectile>Projectile Weapons</a></li>
<!--<li><a href=weapons.htm#explosives>Explosives</a></li> -->
</ul>
<br>
</div>
</li>
<li><a href="humanElement.htm">Human Element</a>
<br>
</li>
<li><a href="refMaterial.htm">Reference / Contact</a>
<div class="subMenu">
<ul>
<li><a href=refMaterial.htm#refer>Reference Material</a></li>
<li><a href=refMaterial.htm#contact>Contact Info</a></li>
</ul>
<br>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
这是设置我的布局的 CSS
/* DIV set up*/
#main
{
width: 90%;
min-width: 700px;
margin-left: auto;
margin-right: auto;
opacity: .88;
}
#main-right
{
width: 79%;
position: relative;
float: right;
}
#main-left
{
width: 19%;
position: fixed;
float: left;
}
#left_col
{
width: 17.5%;
min-width: 135px;
width: 95%;
padding: 10px 0px 0px 0px;
text-align: center;
/*
opacity: .99;
background-color: #663333;
border: 3px solid #000000;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
*/
}
#right_col
{
width: 95%;
background-color: #663333;
float: left;
padding: 10px 0px 0px 0px;
border: 3px solid #000000;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}
.content
{
width: 90%;
color: #000000;
padding: 1px 15px 5px 10px;
background-color: #B8B8B8;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
-webkit-box-shadow: 3px 3px #181818;
-moz-box-shadow: 3px 3px #181818;
box-shadow: 3px 3px #181818;
}
.contentImage
{
float:left;
margin-right: 5px;
width: 40%;
}
#footer
{
width: 80%;
margin-left: auto;
margin-right: auto;
font-size: .80em;
font-style: italic;
text-align: center;
border: 3px solid #000000;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
clear: both;
}
#footerNav
{
font-size: 1em;
font-style: normal;
text-align: center;
color: #000000;
}
#footerNav a
{
text-decoration: none;
color: #ffffff;
padding: 0px 3px 0px 3px;
-webkit-border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;
}
#footerNav a:visited
{
color: #ffffff;
}
#footerNav a:hover
{
background: #000000;
}
#leftLogo
{
width: 100%;
min-width: 135px;
height: 115px;
}
#leftLogo img
{
min-width: 135px;
width: 95%;
height: auto;
margin-top: 30px;
}