Question

我的目标是在整个<div class="table-responsive"> <table class=""table table-striped table-bordered">  </table> </div>元素上设置背景图片，但<main>元素不会扩展到页面底部（或者在我的情况下扩展到页脚）我该怎么办？因为<main>只是在页面中间结束了？

＆＃13;

<main>

＆＃13;

html {
  	height: 100%;
    box-sizing: border-box;
}
body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
}

	/* ---------------------------------------------------------------- */
#fullmain {
	padding-top: 109px;
  	padding-bottom: 86px;
  	text-align: center;
    
    background: #f5f5f5 url(" http://pre06.deviantart.net/2bf3/th/pre/i/2010/284/b/d/autumn_fortest_ii_by_lotusonlinede-d30jn9b.jpg") no-repeat center center;
	  background-size: cover;
	  min-height: 100%;
    

}


#header {
	background-color: #25211e;
	border-bottom: 6px solid #1d1a18;
	text-align: center;
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 103px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    z-index: 99;

}

#heading {
    font-family: "titlefont";
	color: #c1b497;
	font-size: 45px;
	display: inline-block;
	margin-bottom: 10px;
	margin-top: 15px;
}

	/* ---------------------------------------------------------------- */


#footer {
    background-color: #25211e;
	border-top: 6px solid #1d1a18;
	text-align: center;
	position: absolute;
  	right: 0;
 	bottom: 0;
  	left: 0;
  	height: 80px;
  	z-index: 98;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#credit {
    font-family: "Helvetica";
    font-size: 14px;
	color: #c1b497;
	font-weight: 600;

＆＃13;

Answer 1

图像在整个背景中，我只是将位置和宽度添加到#fullmain id。

html {
  	height: 100%;
    box-sizing: border-box;
}
body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100%;
}

	/* ---------------------------------------------------------------- */
#fullmain {
	
text-align: center;
background: #ec2222 url(http://pre06.deviantart.net/2bf3/th/pre/i/2010/284/b/d/autumn_fortest_ii_by_lotusonlinede-d30jn9b.jpg) no-repeat center center;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
    

}


#header {
	background-color: #25211e;
	border-bottom: 6px solid #1d1a18;
	text-align: center;
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 103px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    z-index: 99;

}

#heading {
    font-family: "titlefont";
	color: #c1b497;
	font-size: 45px;
	display: inline-block;
	margin-bottom: 10px;
	margin-top: 15px;
}

	/* ---------------------------------------------------------------- */


#footer {
    background-color: #25211e;
	border-top: 6px solid #1d1a18;
	text-align: center;
	position: absolute;
  	right: 0;
 	bottom: 0;
  	left: 0;
  	height: 80px;
  	z-index: 98;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#credit {
    font-family: "Helvetica";
    font-size: 14px;
	color: #c1b497;
	font-weight: 600;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
	</head>
	<body>
		<div id="all">
			<header id="header">
              	<h1 id="heading">My Page</h1>
            </header>
			<main id="fullmain">
			</main>
			<footer id="footer">
				<p id="credit">Footer</p>
			</footer>
		</div>
	</body>
</html>

Answer 2

您忘记将#all标记设置为高度100％

#all {
    height: 100%;
}

享受=]

整个<main>元素的背景图像

2 个答案: