3

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

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

4

2 回答 2

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;
}
于 2013-03-01T08:14:32.077 回答
0

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

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

}

请...看演示

演示

于 2013-03-01T07:22:40.497 回答