Asp.net 与内容和页脚重叠的侧边栏_Asp.net_Css_Asp.net Mvc 3_Razor

Asp.net 与内容和页脚重叠的侧边栏

asp.net css asp.net-mvc-3 razor

Asp.net 与内容和页脚重叠的侧边栏,asp.net,css,asp.net-mvc-3,razor,Asp.net,Css,Asp.net Mvc 3,Razor,我这里有一个例子来最好地描述我的问题只要内容只有小项目，侧边栏就会与我的内容和页脚重叠。在我的\u布局中我这样调用我的侧边栏 <body> <div class="page"> <div id="header"> <div id="menucontainer"> <ul id="nav"> MENUTABS

我这里有一个例子来最好地描述我的问题
只要内容只有小项目，侧边栏就会与我的内容和页脚重叠。

在我的\u布局中我这样调用我的侧边栏

<body>
<div class="page">
    <div id="header">          
        <div id="menucontainer">
             <ul id="nav">
               MENUTABS
             </ul>
        </div>
    </div>
    <div id="main">   
    <div id = "sidebar">
    @if (IsSectionDefined("SideBar"))
    {
        @RenderSection("SideBar", required: false)

    }
    else { 
       <p>Currently Unavailable, Sorry for the inconvinience</p>
    }
        </div>

        @RenderBody()
    </div>
    <div id="footer">
    <div id="copyright">FOOTER</div>
    </div>
</div>
</body>

这是我的CSS

.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#main 
{
    clear: both;
    padding: 10px 10px 10px 10px;
    background-color: #fff;
}

#sidebar
{
    float:left;
    margin:200px 10px -30px 10px;
    padding:10px -10px -10px 10px;
    width:235px;
    height:auto;
    border: solid 2px black;
    background-color:#9acbba;    
}

footer, 
#footer {
    background-color: #fff;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
}

请帮我找出问题的原因。谢谢你的

你应该

浮动

还有

#侧边栏

的

div

包装，我想这是

#主

#main 
{
   float:left;
    clear: both;
    padding: 10px 10px 10px 10px;
    background-color: #fff;

}

请。。。请看演示

好吧，问题是这真的很简单。。。几乎所有的标记都是错误的，但这里有一个网站的工作框架，请参见

HTML文件

<body>
<div class="page">
    <div id="main">   
        <div id="header">          
            <div id="menucontainer">
                 <ul id="nav">
                   MENUTABS
                 </ul>
            </div>
        </div>
        <div id="sidebar">
             @if (IsSectionDefined("SideBar")) {
                   @RenderSection("SideBar", required: false)

             } else { 
                   <p>Currently Unavailable, Sorry for the inconvinience</p>
             }
        </div>
        <div id="content">
        </div>
        <div id="footer">
            <div id="copyright">FOOTER</div>
        </div>
    </div>
</div>
</body>

是否清除了浮动？请尝试在包含左侧导航和内容的元素底部添加

<body>
<div class="page">
    <div id="main">   
        <div id="header">          
            <div id="menucontainer">
                 <ul id="nav">
                   MENUTABS
                 </ul>
            </div>
        </div>
        <div id="sidebar">
             @if (IsSectionDefined("SideBar")) {
                   @RenderSection("SideBar", required: false)

             } else { 
                   <p>Currently Unavailable, Sorry for the inconvinience</p>
             }
        </div>
        <div id="content">
        </div>
        <div id="footer">
            <div id="copyright">FOOTER</div>
        </div>
    </div>
</div>
</body>

.page {
    width: 90%;
    margin: 0 auto;
}

#main 
{
    float:left;
    padding: 10px 10px 10px 10px;
    background-color: gray;
    width:940px;
}
#header {
    width:900px;
    padding:10px;
    margin:10px;
    background: yellow;
}
#content {
    width: 641px;
    background: blue;
    height: 20px;
    float: left;
    margin:10px;
    padding:10px;
}
#sidebar
{
    float:left;
    margin:10px;
    padding:10px;
    width:215px;
    height:auto;
    border: solid 2px black;
    background-color:red;    
} 
#footer {
    background-color: white;
    color: #999;
    padding: 10px;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    clear: both;
    margin: 10px;
    width: 900px;
}