Question

我无法让我的布局正常工作，我有一个主div和一个侧边栏div如果屏幕尺寸调整大小或者在屏幕上查看的内容小于我设计的那个，则float: left （1920x1080）然后侧边栏div低于主要内容。

我尝试在每个div周围放置一个包装器，但这没有效果。

    <div id="header">       
        [Header]        
    </div>

    <div id="content">      
        [Content]       
    </div>

    <div id="sideBar">
        [SideBar]
    </div>

    <div id="footer">
        [Footer]
    </div>

body
{   
    width: 100%;
    color: #000000;
    background-color: #000000; 
    margin: 0;
    padding: 0; 
}

#header
{
    width: 100%;
    height: 110px;
    background-color: #336699;
    color: #FFFFFF;
    margin: 0px;
    padding: 0px;   
}

#content
{
    float: left;
    margin-left: 50px;
    width: 70%;
    height: 700px;  
    margin-top: 40px;       
    padding: 30px;
    background-color: #FFFFFF;
    margin-bottom: 40px;
}

#sideBar
{
    float: left;    
    margin-left: 50px;  
    width: 15%; 
    height: 400px;
    margin-top: 40px;
    padding: 30px;
    background-color: #FFFFFF;  
}

#footer
{
    width: 100%;
    height: 80px;
    background-color: #174555;
    margin: 0px;
    padding: 0px;
    color: #ffffff; 
    clear: both;
}

基本上两个div应该调整大小，直到达到一定的大小，然后应该启用滚动。我很确定我做了一些简单的错误，但我不是一个设计人员。

示例可以在此处显示：Link

感谢您的任何建议：）

Answer 1

你正在混合百分比和像素。 70％宽度+ 30px填充+ 50px边距（全部在content）+ 50px边距+ 15％宽度+ 30px填充（全部在sidebar上）可以加起来超过100％。

Answer 2

凯普是对的。

另外，为什么不简单地从一个主要的div开始，比如测量1000px的宽度，然后在那里工作？如果你不能这样做，那么选择一个测量类型，如px，并坚持使用这些元素的宽度，填充和边距。至少这样可以更容易地进行数学计算并知道你做了多少空间。

我一般坚持相对测量，比如像素（我不喜欢绝对，它是个人的。：P）。

修改

好的，试试这个，在整个页面周围添加一个包装器（只是为了测试，对我来说是裸露的）。给那个包装器一个类似#main-body或者id的id，并定义一个宽度。设置内容和侧边栏的宽度。如果您最小化屏幕，侧边栏不应低于内容div。不过，它会走出观景港。

/* Wrap all in #main-body with specified width */

#main-body{
    width:1000px;
    margin:0 auto;
}

/* give these elements a relative width */

#content
{
    float: left;
    margin-left: 50px;
    width:600px;
    height: 700px;  
    margin-top: 40px;       
    padding: 30px;
    background-color: #FFFFFF;
    margin-bottom: 40px;
}

#sideBar
{
    float: left;
    width:100px;
    margin-left: 50px;  
    height: 400px;
    margin-top: 40px;
    padding: 30px;
    background-color: #FFFFFF;  
}

对不起这件事的长度。：P

保持浮动div内联

2 个答案: