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

さて、これは本当に単純なことです...ほとんどすべてのマークアップが間違っていましたが、ここにあなたのウェブサイトの作業フレームがあります このフィドルを参照してください

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;

}

PLS... デモを見る

デモ

于 2013-03-01T07:22:40.497 に答える