Question

我的页面底部有空白区域。我尝试了各种帮助他人的方法，但没有一种方法适合我，包括填充，边距，高度，汽车等。

这是我的代码：

＆＃13;

.profwindow {
    position: relative;
    left: 40px;
    float: left;
    width: 250px;
    top: 50px;
    height: 200px;
    background-color: rebeccapurple;
}

.chatwwindow {
    position: relative;
    left: -210px;
    float: left;
    height: 370px;
    width: 250px;
    top: 280px;

    background-color: red;
}

.mapwindow {
    position: relative;
    float: right;
    width: 1000px;
    height: 560px;
    right: 10px;
    background-color: red;
    top: -430px;
        
}

.navigation {
        position: relative;
    float: right;
    right: 10px;
    top: -460px;
    height: 150px;
    width: 1000px;
    background-color: red;
}

#mainphplogo {
    position: relative;
    width: 20%;
    left: 40px;
    top: 20px;
    background-color: red;
}

＆＃13;

<!DOCTYPE html>
<html lang="lt">
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div id="mainphplogo">
    <a href="index.php"><img src="images/logo.png" height="100px"  ></a>
    </div>
    <div class="profwindow"></div>
    <div class="chatwwindow"></div>
    <div class="navigation"></div>
    <div class="mapwindow"></div>
    
</body>
</html>

＆＃13;

这是演示影响页面问题的最小代码示例，正如您所看到的，有一个黑色＆amp;页面末尾的空格，我无法删除。

Answer 1

第一个建议：使用引导网格或类似的东西切换到响应式设计。

针对您的具体问题，请删除

float: right;

来自.mapwindow的

将修复额外的空格，因为浮动它会将初始点设置在远离底部的位置，然后使用

将其恢复

top: -430px;

所以初始位置仍然存在

Answer 2

添加

html{
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
}

到你的css文件我能够得到底部的空白区域消失。

html{
  height: 100%;
  width: 100%;
}
body {
  height: 100%;
  width: 100%;
}
.profwindow {
    position: relative;
    left: 40px;
    float: left;
    width: 250px;
    top: 50px;
    height: 200px;
    background-color: rebeccapurple;
}

.chatwwindow {
    position: relative;
    left: -210px;
    float: left;
    height: 370px;
    width: 250px;
    top: 280px;

    background-color: red;
}

.mapwindow {
    position: relative;
    float: right;
    width: 1000px;
    height: 560px;
    right: 10px;
    background-color: red;
    top: -430px;
        
}

.navigation {
        position: relative;
    float: right;
    right: 10px;
    top: -460px;
    height: 150px;
    width: 1000px;
    background-color: red;
}

#mainphplogo {
    position: relative;
    width: 20%;
    left: 40px;
    top: 20px;
    background-color: red;
}

<!DOCTYPE html>
<html lang="lt">
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div id="mainphplogo">
    <a href="index.php"><img src="images/logo.png" height="100px"  ></a>
    </div>
    <div class="profwindow"></div>
    <div class="chatwwindow"></div>
    <div class="navigation"></div>
    <div class="mapwindow"></div>
    
</body>
</html>

Answer 3

好的，我解决了这种方法，一个简单的方法为左右两侧创建了一个新的两个div，并插入它们的右侧和左侧div这样：

.profwindow {
    position: relative;
    left: 40px;
    
    width: 250px;
    top: 50px;
    height: 200px;
    background-color: rebeccapurple;
}

.chatwwindow {
    position: relative;
    left: 40px;
    height: 370px;
    width: 250px;
    top: 75px;

    background-color: red;
}

.mapwindow {
    position: relative;
    top: 40px;
    width: 1000px;
    height: 560px;
    background-color: red; 
}

.navigation {
    position: relative;
    top: 20px;
    height: 150px;
    width: 1000px;
    background-color: red;
}

.mainleft {
    float: left;
    background-color: aqua;
    position: relative;
    width: 300px;
    height: 800px;
}

.mainright {
    right: 10px;
    float: right;
    background-color: aqua;
    position: relative;
    width: 1000px;
    height: 800px;
}

<!DOCTYPE html>
<html lang="lt">
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div class="mainleft">
        <div id="mainphplogo">
        <a href="index.php"><img src="images/logo.png" height="100px"  ></a>
        </div>
        <div class="profwindow"></div>
        <div class="chatwwindow"></div>
    </div>
    <div class="mainright">
        <div class="navigation"></div>
        <div class="mapwindow"></div>
    </div>
</body>
</html>

页面底部的空格没有任何帮助

3 个答案: