我用过css，现在滚动是不可能的

时间：2011-01-26 09:17:08

标签： asp.net html css

aspx代码

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="learnvb1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Welcome to</title>

    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1"  runat="server">
    <div>


    <div id="top_image_logo">
        <asp:ImageButton ID="ImageButton1" runat="server" 
            AlternateText="ccccccccccccccccccccccccccccc" ImageUrl="~/Logo/XCss02.png" 
            PostBackUrl="~/Default.aspx" ToolTip="ccccccccccccccccccccccccccccc" /> 
    </div>


    <div id="navigation_top">
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#">Home</asp:HyperLink>
        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#">Products</asp:HyperLink>
        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#">Services</asp:HyperLink>
        <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="#">Technology</asp:HyperLink>
        <asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#">Customers</asp:HyperLink>
        <asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="#">News</asp:HyperLink>

    </div>



    <div id="navigation_bottom">
        <asp:HyperLink ID="HyperLink7" runat="server" NavigateUrl="#">Contact_Us</asp:HyperLink>
        <asp:HyperLink ID="HyperLink8" runat="server" NavigateUrl="#">Career</asp:HyperLink>
        <asp:HyperLink ID="HyperLink9" runat="server" NavigateUrl="#">Web_Mail</asp:HyperLink>
        <asp:HyperLink ID="HyperLink10" runat="server" NavigateUrl="#">Site_Map</asp:HyperLink>
  </div>


    <div id="top_name">
        <asp:Label ID="Label2" runat="server" Text="ccccccccccccccccccccccccccccc"></asp:Label>
    </div>

    <div id="top_name_bar">
        <asp:Image ID="Image1" runat="server" AlternateText="UNDERLINED" 
            CssClass="top_name_bar_image" ImageUrl="~/Gradient_Bar/gradientbar.gif" />

    </div>

    <div id="top_navigation_links_box">
    <div id="top_navigation_links">
        <asp:HyperLink ID="HyperLink11" runat="server" NavigateUrl="~/Default.aspx" Target="first_iframe">Home</asp:HyperLink>
        &nbsp;
        <asp:HyperLink ID="HyperLink12" runat="server" NavigateUrl="~/Contact_Us.aspx" Target="first_iframe">Contact Us</asp:HyperLink>
        &nbsp;
        <asp:HyperLink ID="HyperLink13" runat="server" Target="first_iframe">Web Mail</asp:HyperLink>
        &nbsp;
        <asp:HyperLink ID="HyperLink14" runat="server" Target="first_iframe">Career</asp:HyperLink>
        &nbsp;
        <asp:HyperLink ID="HyperLink15" runat="server" Target="first_iframe">Login</asp:HyperLink>
    </div>
    </div>


    <div id="top_flash_area">

    This is the flash area.

    </div>


    <div id="navigation_left">

        <div id="navigation_div1">
        <asp:HyperLink ID="HyperLink16" runat="server" Target="first_iframe" 
            NavigateUrl="~/PRODUCTS.aspx">Products</asp:HyperLink>
        </div>

        <div id="navigation_div2">
        <asp:HyperLink ID="HyperLink17" runat="server" Target="first_iframe">Services</asp:HyperLink>
        </div>

        <div id="navigation_div3">
        <asp:HyperLink ID="HyperLink18" runat="server" Target="first_iframe">Demo</asp:HyperLink>
        </div>

        <div id="navigation_div4">
        <asp:HyperLink ID="HyperLink19" runat="server" Target="first_iframe">HyperLink1</asp:HyperLink>
        </div>

        <div id="navigation_div5">
        <asp:HyperLink ID="HyperLink20" runat="server" Target="first_iframe">HyperLink20</asp:HyperLink>
        </div>

        <div id="navigation_div6">
        <asp:HyperLink ID="HyperLink21" runat="server" Target="first_iframe">HyperLink21</asp:HyperLink>
        </div>

        <div id="navigation_div7">
        <asp:HyperLink ID="HyperLink22" runat="server" Target="first_iframe">HyperLink22</asp:HyperLink>
        </div>

        <div id="navigation_div8">
        <asp:HyperLink ID="HyperLink23" runat="server" Target="first_iframe">HyperLink23</asp:HyperLink>
        </div>

        <div id="navigation_div9">
        <asp:HyperLink ID="HyperLink24" runat="server">HyperLink24</asp:HyperLink>
        </div>

        <div id="navigation_div10">
        <asp:HyperLink ID="HyperLink25" runat="server">HyperLink25</asp:HyperLink>
        </div>





    </div>


     <div id="copyright_div">
        <asp:Label ID="Label1" runat="server" Text="Copyright &copy; 2011 ccccccccccccccccccccccccccccc. All rights reserved."></asp:Label>
    </div>
    <!-- copyright_div div ends -->



    <div id="iframe_div">
    <iframe id="iframe1"  runat="server" scrolling="auto" name="first_iframe" 
            src="Default.aspx">


    </iframe>
    </div>



     </div>  
    </form>
</body>
</html>

CSS 

body 
{
     background-color:Aqua;
     height: 100%; 
     padding: 0;
     overflow:auto;
}

 /*<works for all properly, except IE> 

<IE works with margin-top, but no other browsers work with that setting!>

<therefore not using the following>

#div_id
{
    position:fixed;
    margin-top:90%;
    padding-top:0.3%;
    background-color:Yellow;
    color:Green;
    overflow:auto;
    width:100%;

}



*/



#top_image_logo
#ImageButton1
{
    background-color:Green;
    position:fixed;
    top:10px;
    left:60px;
    width:85px;
    height:75px;
}

#top_name
{

     background-color:Lime;
     position:fixed;
     top:10px;
     left:170px;
     font-family:Bookman Old Style;
     font-size:40px;
     font-style:oblique;
     font-weight:bolder;
     letter-spacing:3px;
     white-space:nowrap; 
}

#top_name_bar
{
    position:fixed;
    top:58px;
    left:170px;
    min-width:740px;
    min-height:7px;
    height:7px;
    max-width:740PX;
    max-height:7px;

}

.top_name_bar_image
{
    position:fixed;
    top:58px;
    left:170px;
    min-width:740px;
    min-height:7px;
    height:7px;
    max-width:740PX;
    max-height:7px;


}


#top_navigation_links
{
 position:fixed;
 top:63px;
 left:610px;
 white-space:nowrap; 
 }

 #top_navigation_links_box
 {

   position:fixed;
   top:65px;
   left:606px;
   width:300px;
   height:20px;

   border-bottom-color:Black;
   border-bottom-style:solid;
   border-bottom-width:thin;

   border-left-color:Black;
   border-left-style:solid;
   border-left-width:thin;

   border-right-color:Black;
   border-right-style:solid;
   border-right-width:thin;

 }


#top_flash_area
{
   position:fixed;
   top:65px;
   left:170px;
   width:736px;
   height:80px;
   z-index:-15;



   border-bottom-color:Black;
   border-bottom-style:solid;
   border-bottom-width:thin;

   border-left-color:Black;
   border-left-style:solid;
   border-left-width:thin;

   border-right-color:Black;
   border-right-style:solid;
   border-right-width:thin; 

}

#navigation_top
{
    position:fixed;
    background-color:Olive;
    left:20%;
    top:5%;
    display: inline;
    white-space:nowrap;
    /*to prevent wraping when is resized*/
    word-spacing:10px;

}


#copyright_div
{
    position:fixed;
    left: 320px;
    top:530px;
    background-color:Yellow;
    color:Green;
    z-index:-15;
    width:425px;
}


#navigation_bottom
{
    position:fixed;
    top:550px;
    background-color:Aqua;
    display: inline;
    white-space:nowrap;
    /*to prevent wraping when is resized*/
     word-spacing:20px;
     left:370px;
     font-size:small;


}


#navigation_left
{
    position:fixed;
    left:60px;
    top:170px;
}



#navigation_div1
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}



#navigation_div2
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}



#navigation_div3
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}


#navigation_div4
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}


#navigation_div5
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}


#navigation_div6
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}


#navigation_div7
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}


#navigation_div8
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}



#navigation_div9
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}

#navigation_div10
{
    width:82px;
    height:20px;
    background-color:Teal;
    border-bottom-color:White;
    border-bottom-style:solid;
    border-bottom-width:medium;

}

#iframe1
{

    position:fixed;
    left:170px;
    top:170px;
    width:738px;
    height:350px;

}

来自ie

的来源 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
    Welcome to
</title><link href="StyleSheet1.css" rel="stylesheet" type="text/css" /></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4MzE3NDc0MjZkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQxJbWFnZUJ1dHRvbjERT5N2pheAVdxE9A2afRBRX8sOKA==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=zf50eo2Vd7XbF74AU25pGg2&amp;t=634219951313125000" type="text/javascript"></script>

<div>

    <input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="NUZS9KyyGJqfjbacfPFnZw2" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgK88ompCgLSwpnTCLE/HF2YL42fL1hS8OvmaG+pY4oB" />
</div>
    <div>


    <div id="top_image_logo">
        <input type="image" name="ImageButton1" id="ImageButton1" title="ccccccccccccccccccccccccccccc" src="Logo/XCss02.png" alt="ccccccccccccccccccccccccccccc" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ImageButton1&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Default.aspx&quot;, false, false))" style="border-width:0px;" /> 
    </div>


    <div id="navigation_top">
        <a id="HyperLink1" href="#">Home</a>
        <a id="HyperLink2" href="#">Products</a>
        <a id="HyperLink3" href="#">Services</a>
        <a id="HyperLink4" href="#">Technology</a>
        <a id="HyperLink5" href="#">Customers</a>
        <a id="HyperLink6" href="#">News</a>

    </div>



    <div id="navigation_bottom">
        <a id="HyperLink7" href="#">Contact_Us</a>
        <a id="HyperLink8" href="#">Career</a>
        <a id="HyperLink9" href="#">Web_Mail</a>
        <a id="HyperLink10" href="#">Site_Map</a>
  </div>


    <div id="top_name">
        <span id="Label2">ccccccccccccccccccccccccccccc</span>
    </div>

    <div id="top_name_bar">
        <img id="Image1" class="top_name_bar_image" src="Gradient_Bar/gradientbar.gif" alt="UNDERLINED" style="border-width:0px;" />

    </div>

    <div id="top_navigation_links_box">
    <div id="top_navigation_links">
        <a id="HyperLink11" href="Default.aspx" target="first_iframe">Home</a>
        &nbsp;
        <a id="HyperLink12" href="Contact_Us.aspx" target="first_iframe">Contact Us</a>
        &nbsp;
        <a id="HyperLink13" target="first_iframe">Web Mail</a>
        &nbsp;
        <a id="HyperLink14" target="first_iframe">Career</a>
        &nbsp;
        <a id="HyperLink15" target="first_iframe">Login</a>
    </div>
    </div>


    <div id="top_flash_area">

    This is the flash area.

    </div>


    <div id="navigation_left">

        <div id="navigation_div1">
        <a id="HyperLink16" href="PRODUCTS.aspx" target="first_iframe">Products</a>
        </div>

        <div id="navigation_div2">
        <a id="HyperLink17" target="first_iframe">Services</a>
        </div>

        <div id="navigation_div3">
        <a id="HyperLink18" target="first_iframe">Demo</a>
        </div>

        <div id="navigation_div4">
        <a id="HyperLink19" target="first_iframe">HyperLink1</a>
        </div>

        <div id="navigation_div5">
        <a id="HyperLink20" target="first_iframe">HyperLink20</a>
        </div>

        <div id="navigation_div6">
        <a id="HyperLink21" target="first_iframe">HyperLink21</a>
        </div>

        <div id="navigation_div7">
        <a id="HyperLink22" target="first_iframe">HyperLink22</a>
        </div>

        <div id="navigation_div8">
        <a id="HyperLink23" target="first_iframe">HyperLink23</a>
        </div>

        <div id="navigation_div9">
        <a id="HyperLink24">HyperLink24</a>
        </div>

        <div id="navigation_div10">
        <a id="HyperLink25">HyperLink25</a>
        </div>





    </div>


     <div id="copyright_div">
        <span id="Label1">Copyright © 2011 ccccccccccccccccccccccccccccc. All rights reserved.</span>
    </div>
    <!-- copyright_div div ends -->



    <div id="iframe_div">
    <iframe id="iframe1" scrolling="auto" name="first_iframe" src="Default.aspx">


    </iframe>
    </div>



     </div>  
    </form>
</body>
</html>

注释

我在所有浏览器上都试过了。

3 个答案:

答案 0 :(得分：1)

您网页上的CSS 不太好。我本人只是废弃它并重新开始。

你不应该将position: fixed用于所有事情 - 这就是你无法滚动的原因。

话虽这么说，最简单的方式来获得看起来几乎的东西（菜单看起来错误）并且让你滚动就是替换{{的所有实例1}}与position:fixed。

答案 1 :(得分：0)

我认为是

body 
{
     background-color:Aqua;
     height: 100%; 
     padding: 0;
     overflow:auto;
}

这导致了问题。

尝试删除overflow：auto;

答案 2 :(得分：0)

您使用height: 100%是否有任何特殊原因？我怀疑这个和overflow: auto规则的组合是导致问题的原因。

您可以尝试使用overflow: scroll尝试强制显示滚动条。

但我建议您考虑完全删除height和overflow规则。了解为什么需要使用它们会很有帮助。

相关问题
最新问题