Question

我在这里有一个插图，以便最好地描述我的问题 enter image description here
只要内容只有很小的项目，补充工具栏就会重叠我的内容和页脚。

在我的 _layout 中，我正在调用我的侧边栏

<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>

然后在我的查看中我将其称为

 @section SideBar
   {
    @{Html.RenderAction("Index", "Post");}
   }

这是我的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;
}

请帮我弄清楚这个问题的原因是什么。谢谢T_T

Answer 1

好的，这真的很简单...几乎所有的标记都错了，但是你的网站有一个工作框架，请看 THIS FIDDLE

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>

CSS

.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;
}

Answer 2

您应该float div #sidebar包装#main我正在邀请#main { float:left; clear: both; padding: 10px 10px 10px 10px; background-color: #fff; }

{{1}}

PLS ...参见演示

DEMO

侧边栏重叠内容和页脚

2 个答案: