Question

我一直在做这个网站，但我被困在屏幕底部的blusih灰色空白区拒绝去的地方。我移动了页面。关于如何修复这个空白区域的任何想法？

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
body {
    background: #08121A;
    background-image: url('../img3.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', 'sans-serif';
    font-size: 1.1em;
    color: #545B64;
    font-weight: 300;
}
.stretch {
    width: 100%;
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
}
/** element defaults **/

table {
    width: 100%;
    text-align: left;
}
th,
td {
    padding: 10px 10px;
}
th {
    color: #666;
    background: #141517 none repeat-x scroll left top;
}

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>site titl</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css" />
    <link rel="stylesheet" href="css/styles.css" type="text/css" />
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <script type="text/javascript" src="js/superfish.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
</html>

Answer 1

身体css错了。试试这个：

background-size:cover;

Answer 2

尝试放img {position: fix; left:0px; top:0px; right:0px; bottom:0px;}

并将img作为body标签中的最后一个元素移动

在您的案例中，正文将从其中的所有元素中获取高度。所以如果你把img - 背景总是取身体的高度（这是从身体中的所有元素计算出来的），所以如果你把它作为标记<img src='myimg'/>将占用空间而不是＆＃39 ; t忘了把img标签放低z-index

Answer 3

在您的css文件中添加

html {
height:100% !important;
 }

请参阅此fiddle

Answer 4

请更正您的HTML代码。

您必须在标记开始前结束标记。不是标签的结尾。所以你的HTML代码将是这样的：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>


<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>

<script type="text/javascript" src="js/custom.js"></script>

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>

Put here your body content

</body>   
</html>

然后按照css。

.yourcssClass {position: fix; left:0px; top:0px; right:0px; bottom:0px;}

如何删除网站中的空白区域

4 个答案: