Question

在设计网页时，我使用标记来划分页面中的部分。所有部分都按照我为此编写的CSS工作，但是应该是页面的页脚部分的“最后”div与上部部分重合。任何人都可以帮助如何克服这个问题。我在这里提供了JSFiddle链接 jsfiddle

    <html xmlns="http://www.w3.org/1999/html">
<head>
<style type="text/css">
    #biggest{
        width:90%;
        padding-left:5%;
        padding-right:5%;
        height:auto;
    }
    #header{
        height:150px;
        background-color:#8888ff;
    }
    #menus{
        height:50px;
        background-color:#d9d9d9;
    }
    #threecols{
        width:100%;
        height:inherit;
    }
    #one{
        width:20%;
        height:auto;
        background-color:#0081c2;
        float: left;
    }
    #two{
        width:78%;
        height:auto;
        float:right;
    }
    #three{
        width:70%;
        height:auto;
        float:left;
        background-color:#3366FF;
    }
    #four{
        width:29%;
        height:auto;
        float:right;
        background-color:#ffffcc;
    }
    #last{
        width:100%;
        height:100px;
        background-color:#ffdddd;
    }
 </style>
<body>
<div id="biggest">
    <div id="header"></div>
    <div id="menus"></div>
    <div id="threecols">
        <div id="one">
            This is one<br/>
            This is one<br/>
            This is one<br/>
            This is one<br/>
            This is one<br/>
            This is one<br/>
        </div>
        <div id="two">
            <div id="three">
                This is one<br/>
                This is one<br/>
                This is one<br/>
                This is one<br/>
                This is one<br/>
                This is one<br/>
            </div>
            <div id="four">
                This is one<br/>
                This is one<br/>
                This is one<br/></div>
        </div>
    </div>
    <div id="last"></div>
</div>
</body>
</html>

Answer 1

您是否期望这样的事情： Demo

<强> CSS ：

 #last {
        clear:both;
        display:block;
        width:100%;
        height:100px;
        background-color:#ffdddd;
    }

Answer 2

容器#three和#four处于浮动状态你需要清除父#two的浮动元素，就像你需要清除#threecols一样。如果你漂浮了div，你需要清除父div。 jsfiddle HTML

<div id="biggest">
    <div id="header"></div>
    <div id="menus"></div>
    <div id="threecols" class="clearfix">
        <div id="one">
            This is one<br/>
            This is one<br/>
            This is one<br/>
            This is one<br/>
            This is one<br/>
            This is one<br/>
        </div>
        <div id="two" class="clearfix">
            <div id="three">
                This is one<br/>
                This is one<br/>
                This is one<br/>
                This is one<br/>
                This is one<br/>
                This is one<br/>
            </div>
            <div id="four">
                This is one<br/>
                This is one<br/>
                This is one<br/></div>
        </div>
    </div>
    <div id="last">footer content</div>
</div>

CSS

    #biggest{
        width:90%;
        padding-left:5%;
        padding-right:5%;
        height:auto;
    }
    #header{
        height:150px;
        background-color:#8888ff;
    }
    #menus{
        height:50px;
        background-color:#d9d9d9;
    }
    #threecols{
        width:100%;
        height:inherit;
    }
    #one{
        width:20%;
        height:auto;
        background-color:#0081c2;
        float: left;
    }
    #two{
        width:78%;
        height:auto;
        float:right;
    }
    #three{
        width:70%;
        height:auto;
        float:left;
        background-color:#3366FF;
    }
    #four{
        width:29%;
        height:auto;
        float:right;
        background-color:#ffffcc;
    }
    #last{
        width:100%;
        height:100px;
        background-color:#ffdddd;
    }
.clearfix:after{
   content: " "; 
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Answer 3

您需要清除div #threecols

Updated Code

添加.clear类

<div id="threecols">
        <div id="one">
            This is one<br>
            This is one<br>
            This is one<br>
            This is one<br>
            This is one<br>
            This is one<br>
        </div>
        <div id="two">
            <div id="three">
                This is one<br>
                This is one<br>
                This is one<br>
                This is one<br>
                This is one<br>
                This is one<br>
            </div>
            <div id="four">
                This is one<br>
                This is one<br>
                This is one<br></div>
        </div>

<div class="clear"></div><!--Add this-->
        </div>

CSS for clear

.clear {
  clear: both;
}

页脚部分使用CSS与其他分区部分重合

3 个答案: