即使我不想要它,滚动条也会出现

时间:2015-11-09 09:01:52

标签: html5 css3 scroll scrollbar overflow

我正在尝试让这个滚动条在我需要时出现而不是在我不在的时候到目前为止我可以让滚动条出现,但即使图像继续显示它仍然存在屏幕。我知道这可能与它上面的div正在关闭屏幕的事实有关,但是当我不想在内部碎片div上时,我无法让滚动条消失。

<html><!-- InstanceBegin template="/Templates/KendraTemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>kendraRossUtahState</title>
 <!-- InstanceEndEditable -->
<link href="file:///C|/Users/Mathew Hammett/Desktop/Designs/Dreamweaver/kendraRossUtahState/CSS/Main.css" rel="stylesheet" type="text/css">
<style>
.MenuDisplay {
    text-decoration:none;
    list-style:none;
    background-color:#DDD;
}
.ListItemDisplay {
    display: inline-block;
    margin-top:20px;
    margin-left:2%;
    margin-right:2%;
    margin-bottom:10px;
}
</style>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body background="../backgroundImage/UtahMoutains-copy7.png"   style="background-repeat:no-repeat; background-position:center; background-attachment:fixed; background-size:cover; margin:0px;">

    <div style=" float:left; width:100%; background-color:#DDD; position:relative; margin:0px;">

        <img src="../backgroundImage/utahGovLogo.png" style=" float:left; padding:20px;">

        <img src="../Images/Search%20Button.png" style="float:right; padding:20px;">

    </div>
    <nav style="z-index:9;">
        <ul style="list-style:none; text-align:center; background-color:#DDD; font-family: Arial,Helvetica, Neue,sans-serif; font-size:120%; color:#666; margin:0px;">
            <a href="government.html"><li class="ListItemDisplay" style="cursor:default;">Government 
                <ul class="MenuDisplay">
                    <li><a href="stateagencies.html">State Agencies</a></li>
                    <li><a href="governorsoffice.html">Governors Office</a></li>
                    <li><a href="executivebranch.html">Executive Branch</a></li>
                    <li><a href="legislative.html">Legislative Branch</a></li>
                    <li><a href="judicial.html">Judicial Branch</a></li>
                    <li><a href="cityandcountygovernment.html">City & County Government</a></li>
                    <li><a href="federalgovernment.html">Federal Government</a></li>
                    <li><a href="electionandvoting.html">Election & Voting</a></li>
                    <li><a href="utahcodeandconstitution.html">Utah Code & Constitution</a></li>
                    <li><a href="statetelephonedirectory.html">State Telephone Directory</a></li>
                    <li><a href="utahdata.html">Utah Data</a></li>
                    <li><a href="openutahgov.html">Open.Utah.gov</a></li>
                </ul><!-- end of  Government  drop down menu-->
            </li><!-- end of Government Button-->
            </a>
            <li class="ListItemDisplay" style="cursor:default;">Services
              <ul class="MenuDisplay">
                    <li><a href="onlineservices.html">Utah.gov Online Services</a></li>
                    <li><a href="citizenservices.html">Citizen Services</a></li>
                    <li><a href="businessservices.html">Business Services</a></li>
                    <li><a href="govtogovservices.html">Gov to Gov Services</a></li>
                    <li><a href="financial.html">Financial</a></li>
                    <li><a href="legal.html">Legal</a></li>
                    <li><a href="utahregistration.html">Utah.gov Registration</a></li>
                    <li><a href="citizenalerts.html">Citizen Alerts</a></li>
                    <li><a href="trending.html">Trending</a></li>
                </ul>

            </li>
            <li class="ListItemDisplay" style="cursor:default;">Employment
              <ul class="MenuDisplay">
                    <li><a href="findajob.html">Find a Job</a></li>
                    <li><a href="educationandtraining.html">Education & Training</a></li>
                    <li><a href="stateemployment.html">State Employment</a></li>
                    <li><a href="careers.html">Careers</a></li>
                </ul>
            </li>
            <li class="ListItemDisplay" style="cursor:default;">Business
              <ul style="text-decoration:none; list-style:none; background-color:#DDD;">
                    <li><a href="onlinebusinessservices.html">Online Business Serices</a></li>
                    <li><a href="startingabusiness.html">Starting a Business</a></li>
                    <li><a href="runningabusiness.html">Running a Business</a></li>
                    <li><a href="relocatingabusiness.html">Relocating a Business</a></li>
                    <li><a href="dissolvingabusiness.html">Dissolving a Business</a></li>
                    <li><a href="assessbusinessidea.html">Assess your Business Idea</a></li>
                    <li><a href="selectbusinessstructure.html">Select your Business Structure</a></li>
                    <li><a href="preparewrittenplan.html">Prepare a Written Business Plan</a></li>
                    <li><a href="govbusinessreq.html">Government Business Requirments</a></li>
                    <li><a href="financialrecources.html">Financial Resources</a></li>
                </ul>
            </li>
            <li class="ListItemDisplay" style="cursor:default;">Education
              <ul class="MenuDisplay" style="left:-90px;">
                    <li><a href="k12education.html">K - 12 Education</a></li>
                    <li><a href="collegesanduniversities.html">Colleges & Universities</a></li>
                    <li><a href="educationalrec.html">Educational Resources</a></li>
                    <li><a href="stem.html">STEM</a></li>
                    <li><a href="historyforkids.html">Utah History for Kids</a></li>
                    <li><a href="homeworkhelp.html">Homework Help</a></li>
                    <li><a href="libraries.html">Libraries</a></li>
                    <li><a href="studentnetwork.html">Student Network</a></li>
                    <li><a href="schoolreport.html">School Reports</a></li>
                </ul>
            </li>
            <li class="ListItemDisplay" style="cursor:default;">Resident
              <ul class="MenuDisplay" style="left:-230px;">
                    <li><a href="citizensandcom.html">Citizens & Community</a></li>
                    <li><a href="healthandsocial.html">Health & Social Serives</a></li>
                    <li><a href="newcomers.html">Newcomers Guide</a></li>
                    <li><a href="moving.html">Moving to Utah</a></li>
                    <li><a href="carsandtrans.html">Cars & Transportation</a></li>
                    <li><a href="utahlaws.html">Utah Laws</a></li>
                    <li><a href="taxinfo.html">Tax Information</a></li>
                    <li><a href="rss.html">RSS ( Just for Youth)</a></li>
                    <li><a href="seniors.html">Seniors.Utah.gov</a></li>
                    <li><a href="neighborhelp.html">Help your Neighbor</a></li>
                </ul>
            </li>
            <li class="ListItemDisplay" style="cursor:default;">Visiting
              <ul class="MenuDisplay" style="width:auto; left:-360px;">
                    <li><a href="tavelandtour.html">Travel & Tourism</a></li>
                    <li><a href="stateparks.html">State Parks</a></li>
                    <li><a href="arts.html">Arts & Culture</a></li>
                    <li><a href="highwayinfo.html">Highway Information</a></li>
                    <li><a href="sportsandrec.html">Sports & Recreation</a></li>
                    <li><a href="artsandleisure.html">Arts & Leisure</a></li>
                </ul>
            </li>
            <li class="ListItemDisplay" style="cursor:default;"><a id="aboutbutton" href="about.html">About</a>
            </li>
            <li class="ListItemDisplay" style="cursor:default;">Connect
              <ul class="MenuDisplay" style="-webkit-column-count:1; width:150px; left:-90px;">
                    <li><a href="facebook.html">Facebook</a></li>
                    <li><a href="twitter.html">Twitter</a></li>
                    <li><a href="google.html">Google +</a></li>
                    <li><a href="photos.html">Photos</a></li>
                    <li><a href="youtube.html">YouTube</a></li>
                    <li><a href="mobile.html">Mobile</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <!-- InstanceBeginEditable name="EditRegion3" -->

    <div id="mainwrapper">
        <div id="innerwrapperabout">

            <div id="aboutimages">
                <img id="aboutimagepng" src="../Images/executiveGovernment.png" width="627" height="614" alt=""/>
            </div><!-- End aboutimages div-->


        </div><!-- End innerwrapper div-->
    </div><!-- mainwrapper-->


    <!-- InstanceEndEditable -->

CSS:

body{
height:100%;
width:100%;
position:fixed; 
}

nav ul li ul {
display: none;
width:auto;
clear:both;
position:relative;
text-align:left; 
padding:10px;
overflow:auto;
-webkit-column-count:2;
column-count:2;
height:auto;
width:auto;
}

.MenuDisplay{
z-index:9;  
}

.ListItemDisplay{
z-index:9;
}

nav ul li:hover > ul {
display:block;
position:absolute;
top: 100%;
left:0;
height:auto;
width:auto;
column-count:2;
}

nav ul li {
position: relative;
}

nav ul li ul li {
width:290px;
margin:10px;
}

#aboutimages {
background-color:#066F84;
width:40%;
height:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
display:block;
padding:25px;
min-width:350px;

}

#innerwrapperabout {
width:100%;
display:block;
position:relative;
height:100%;
overflow:auto;
}

#mainwrapper{
height:100%;
width:100%;
display:block;
position:fixed;
}

#aboutimagepng{
width:100%;
height:auto;
min-width:300px;
display:block;
margin-left:auto;
margin-right:auto;
}

#MainPar{
display:block;  
}

0 个答案:

没有答案