Question

我的代码有问题。我需要在最后一个div（friday_div）和我的网页结尾之间有空格。

HTML code：

    <body>
    <div class="header">
        <h1>Schedule 613</h1>
    </div>
    <div class="wrapper">
        <div class="monday">
            <h1>Monday</h1>
            <div id="monday_div"></div>
        </div>
        <div class="tuesday">
            <h1>Tuesday</h1>
            <div id="tuesday_div"></div>
        </div>
        <div class="wednesday">
            <h1>Wednesday</h1>
            <div id="wednesday_div"></div>
        </div>
        <div class="thursday">
            <h1>Thursday</h1>
            <div id="thursday_div"></div>
        </div>
        <div class="friday">
            <h1>Friday</h1>
            <div id="friday_div"></div>
        </div>
    </div>
</body>

CSS代码：

 body{
    background-color:lightgray;
    min-width:850px;}
.header{
    position:fixed;
    z-index:1;
    left:0;
    top:0;
    min-height:50px;
    width:100%;
    background-color:white;}
.wrapper{
    position:relative;
    top:90px;
    left:1%;
    width:97.5%;}
.monday,.tuesday,.wednesday,.thursday,.friday{
    float:left;
    text-align:center;
    min-height:250px;
    width:100%;
    background-color:white;}
.tuesday,.wednesday,.thursday,.friday{
    margin-top:30px;}
.friday{
    margin-bottom:30px;}

仅当我在Internet Explorer浏览器和EDGE中测试项目时才会出现此问题。我使用Chrome来测试我做了什么但是在Chrome'margin-bottom'工作正常。问题也可能出现在其他浏览器中，但我无法检查出来。我希望有人帮助我。

（我的英语水平不够好，不能更详细地解释这个问题，所以我在这里写了很多行代码给那些知道如何解决问题的人们。

Answer 1

尝试将overflow:hidden;添加到.wrapper

.wrapper{
    position:relative;
    top:90px;
    left:1%;
    width:97.5%;
    overflow:hidden;  // add this
}

Answer 2

将overflow:hidden;添加到.wrapper 然后将CSS更改为：

body{
    background-color:lightgray;
    min-width:850px;}
.header{
    position:fixed;
    z-index:1;
    left:0;
    top:0;
    min-height:50px;
    width:100%;
    background-color:white;}
.monday,.tuesday,.wednesday,.thursday,.friday{
    float:left;
    text-align:center;
    min-height:250px;
    width:100%;
    background-color:white;}
.tuesday,.wednesday,.thursday,.friday{
    margin-top:30px;}
.friday{
    margin-bottom:30px;}
.wrapper{
    position:relative;
    top:90px;
    left:1%;
    width:97.5%;
    overflow:hidden;
}

IE / EDGE边距底部不起作用

2 个答案: