div 侧边栏重叠主体答案

【问题标题】：div sidebar overlapping bodydiv 侧边栏重叠主体
【发布时间】：2013-12-16 00:00:56
【问题描述】：

侧边栏与正文重叠。我需要根据侧边栏 div 和它的背景推送 body div。我有一个jsfiddle链接 link，其中的html代码是：

<div class="container">
    <div class="top_block lo2_header">
        <div class="content">
            asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadf<br>
        </div>
    </div>        
    <div>
    <div class="background lo2_lbar">
    </div>
    <div class="left_block lo2_lbar">
        <div class="content">asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasda
        asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdf<br>
        asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasdasdfasdfasdfasdf<br>
        </div>
    </div>
    <div class="background lo2_body">
    </div>
    <div class="center_block lo2_body">
        <div class="content">lo2_body
        asd<br> asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>   asd<br>asd<br>asd<br>asd<br>asd<br>asd<br>
        </div>
    </div>
    </div>

    <div class="bottom_block lo2_footer">
        <div class="content">lo2_footer
        </div>
    </div>
</div>

【问题讨论】：

在链接到 jsFiddle.net 时，请不要尝试回避在问题中发布代码的 SO 规则。如果 jsFiddle.net 由于任何原因无法访问，那么您的问题将失去所有价值。
链接到 jfiddle 的链接，应该是 jsfiddle。
这里是 JSFiddle 的正确链接 - jsfiddle.net/asdfqwer/qkNTu

标签： css html layout sidebar

【解决方案1】：

因为你只有三个字！

asdasdfasdfasdfasdfsadfasdasdfasdfasdfasdfsadfasda 是一个很长的词。

【讨论】：

我希望body div基本上在长词之后开始
@user3075289 尝试在 MS Paint 上绘制它，并向我们展示您真正想要的东西。 body div 是什么意思？
我刚刚更改了 jsfiddle，我正在尝试设计一个布局，其中我的侧边栏应该推动正文完全显示，并且我的侧边栏和正文都有应该调整的背景
为了同样的效果，你真正需要做的只是将身体推到右侧，侧边栏在后面。我建议你使用-webkit-transform: translate3d(250px, 0,0) 或类似的东西来创造这种效果。看看这个：jsfiddle.net/vishl/wzPSF
我改变了jsfiddle - 我可以推动身体，但不能将整个身体对齐成方形，

【解决方案2】：

body{
width:900px;
background:#e9e9e9;
height:400px;
}


.content{
float:left;
width:65%;
margin-left:3%;
background:red;
height:100%;
}




#header{
width:100%;
height:20%;
background:blue;
margin-bottom:1%;
}

#wrapper{
width:100%;
height:100%;
}

#container{
width:100%;
height:60%;
margin-bottom:1%;
}



.sidebar{
  float:left;
width:25%;
margin-left:1%;
background:yellow;
height:100%;
}

#footer{
margin-top:3px;
clear:both;
background:#FF8C00;
width:100%;
height:10%;

 }

【讨论】：

从我所见的情况来看，我尝试重新创建类似的东西