侧边栏与内容和页脚重叠
Posted
技术标签:
【中文标题】侧边栏与内容和页脚重叠【英文标题】：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 在侧边栏后添加用户不规则表达的内容。 好的，放下浮动。浮动超出正常流程。 【参考方案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;
【讨论】：
嗯，你也有道理。感谢您分享您的想法。我会考虑你的帖子作为答案。 :)以上是关于侧边栏与内容和页脚重叠的主要内容，如果未能解决你的问题，请参考以下文章