Question

我是网页设计新手，遇到asp.net页面问题并使用CSS。我的问题是我希望我的网站结构是这样的。

标题-----------------

的NavBar |含量

............ | ......

页脚-----------------

我有一般的设计工作但是当我有一个长页面的内容，即使它是在浮动：右div如果它比我的导航栏长，它出现在它下面。所以我得到像

这样的东西

标题-----------------

的NavBar |含量

........... |内容

|内容

| ...

页脚-----------------

我不想要，我错过了一些重要的标签/概念，下面是我的CSS和页面的代码。

    <form id="masterForm" runat="server" >

<div id="container" > 
      <div id="header"><br />        
        <h1>Simon & Cats Travel Blog</h1> 
      </div>

      <div id="sidebar">             
        <asp:SiteMapDataSource ID="web" runat="server" />     
        <asp:TreeView ID="siteTreeView" runat="server" DataSourceID="web" ImageSet="Arrows" >
        </asp:TreeView>


        <div >            
            <asp:LoginView ID="loginView" runat="server">             
            <AnonymousTemplate>
            </AnonymousTemplate>
            <LoggedInTemplate >
            </asp:LoginView>

        </div>
      </div>

      <div id="content" runat="server" > 
        <br />
        <asp:SiteMapPath ID="siteBreadcrumb" runat="server">
        </asp:SiteMapPath>  
        <br />    
            <asp:ContentPlaceHolder ID="HeaderSectionContent" runat="server" >   
            </asp:ContentPlaceHolder>            
      </div>

      <div id="footer" >                       
      </div>
</div>  

</form>


    body {
background-color: #4a2A00;
font-family: verdana,arial,serif;
font-size: 0.9em;
margin-bottom: 20px;
margin-top: 20px;
text-align: center;
    }
container {
    width:85%;  
    color: #000000;
    text-align: left;
    top: 0px;
    left: 0px;
    background-color: #F5BF7A ;
      }

header{
    margin-bottom: 10px;
    background: url(banner.jpg) no-repeat;
    height: 140px;
    width: 100%;
      }

sidebar{
    float: left;
    width: 25%;
    margin-left: 1%;
    display: inline;
      }

content{
    float: right;
    width: 68%;
    margin-left: 3%;
    background-color : White ;
      }

footer{
    clear: both;
    color: #000000;
    background-color : White ;
    text-align: right;
    font-size: 0.7em;
      }

Answer 1

我遇到过类似你的问题。我建议你阅读这篇文章。

http://www.winstonprakash.com/articles/netbeans/FixedPageLayout.html。

读一读它会清除一些概念..如果你不喜欢右侧div ..删除它..

CSS Float没有用

1 个答案: