Question

我相信我的代码都混乱了。我的页面底部有很多空白区域，我不知道为什么。到目前为止，我基本上只是去做任何工作，但我也希望我的页面能够响应并且它的缩放非常奇怪。这可能是一个非常难以帮助的问题，但如果有人可以，我会非常感激。任何有关做什么的建议都非常感谢。

下面是代码：

http://jsbin.com/rugidepebe/1/edit?html,css,output

HTML

<!Doctype html>
<html>
    <head>

        <title>Application</title>

        <link rel="stylesheet" type="text/css" href="standard.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

    </head>

    <body>


        <div id="margin-right">
        </div>

        <div id="margin-left">
        </div>


        <div id="navbar">
        </div>

        <div id="contenthead">
        <h1 id="AppHead">Application</h1>
        </div>

        <div id="appbike">
        <h2>Walk/Bike</h2>
        <img src="images/bike.png" id="bike"/>
        </div>

        <div id="appmotor">
            <h2>Motor</h2>
            <img src="images/car.png" id="car"/>
        </div>

    </body>

</html>

CSS

body {

margin: 0px;

}

#navbar {

 position: fixed;
 width: 100%;
 height: 50px;
 background-color: #0C4564;
 z-index: 3;

 }

#margin-right {

position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
right: 0;
z-index: 1;

}

#margin-left {

position: absolute;
height: 150%;
width: 7.8125%;
background-color: #6FE3C2;
z-index: 2;

}

#AppHead {

text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-size: 3.5em;
font-weight: 600;
color: #575757;

}

#contenthead {
display: inline-block;
width: 100%;
margin-top: 50px;
margin-bottom: 10px;
}


#appbike {

position: relative;
width: 15%;
height: 500px;
background-color: #53A78F;
text-align: center;
margin-left: 25%;
margin-top: 5%;

}

#bike {

width: 70%;
position: relative;
margin-top: 50%;

}

#appmotor {

position: relative;
bottom: 10;
float: right;
width: 15%;
height: 500px;
background-color: #53A78F;
bottom: 498px;
margin-right: 25%;

}

h2 {
 text-align: center;
text-decoration: underline;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 2 em;

}

#car {

width: 70%;
position: relative;
margin-top: 50%;
text-align: center;
margin-left: 15%;

}

Answer 1

你还需要对待hmtl＆amp;身体作为包装有时，你将高度设置为150％，其父高是自动的，所以有点困惑。只需将您的第一条规则更改为以下内容：

body, html {
    margin: 0px;
    padding:0;
    height:100%;
}

添加100％的高度应该可以解决您的问题，也可以在填充中添加：0;和hss doc到css选择器。

页面底部的空白区域（凌乱的代码？）

1 个答案: