侧边栏与内容和页脚重叠答案

【问题标题】：Sidebar overlapping the content and footer侧边栏与内容和页脚重叠
【发布时间】：2013-02-15 11:46:51
【问题描述】：

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

在我的 _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

【问题讨论】：

你的浮动清空了吗？
尝试在包含左侧导航和内容的元素底部添加
。
#sidebar 中的浮动？你的意思是删除/删除它？当我删除它时，内容会在侧边栏下方移动。 T_T
在侧边栏后添加用户不规则表达的内容。
好的，放下浮动。浮动超出正常流程。

标签： asp.net css asp.net-mvc-3 razor

【解决方案1】：

你应该 float 也是 #sidebar 的包装器 div 和我来宾是 #main

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

}

请...查看演示

DEMO

【讨论】：

【解决方案2】：

好吧，这真的很简单……几乎你所有的标记都是错误的，但在这里你有一个网站的工作框架，请参阅 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;
}

【讨论】：

嗯，你也有道理。感谢您分享您的想法。我会考虑你的帖子作为答案。 :)