Question

我一直在努力让网站布局正常工作已有一段时间了，虽然我的许多问题都是通过使用Responsive Grid System来解决的，但一个谜尚未解决。

整个页面不会有任何滚动，而是窗口上的单个页面。它本质上是一个带有大菜单的启动页面，因此100％的页面高度和宽度将是窗口中可见的所有内容。

我的标题最大高度为108px，最大长度为800px。当窗口的宽度小于800px时，整个横幅将调整大小以适应，使得高度基本上可变。

我还有一个固定在页面底部的页脚，固定高度为100px（可能根据我的需要而改变）。我打算将其包含社交媒体按钮和联系信息，这些按钮和联系信息根本不需要扩展。

所以现在的问题是弄清楚如何让中间内容填补它们之间的空白。内容区域将完全填充4列，仅包含背景图像和一些文本。我确实找到了one solution using jquery，但它似乎并没有起作用。我不太了解jquery，所以我可能只是没有替换我需要的所有东西。

这是我得到的（图片保持有助于上下文）：

＆＃13;

var minHeight = 300px; // Define a minimum height for the middle div

var resizeMiddle = function() {
    var h = $('html').height() - $('.section header').height() - $('.section footer').height();
	h = h > minHeight ? h : minHeight;
	$('.section content').height(h);
}

$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);

＆＃13;

html {
	height: 100%;
}
body {
	background-image: url('http://server.dewcraft.com/doodleplex/storage/themes/KokenTheme/inc/BG.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
	overflow-x: hidden;
	overflow-y: hidden;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
}

/*  SECTIONS  */
.section header {
	clear: both;
	padding: 0px;
	margin: 0px;
}
.section content{
	clear: both;
	padding: 0px;
	margin: 0px;
	height: 100%;
}
.section footer {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0% 0 0% 0%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
                                               
					
/*  GRID OF FOUR  */
.span_4_of_4banner {
	width: 100%;
	text-align: center;
}
.span_4_of_4footer {
	width: 100%;
	height: 50px;
	text-align: center;
	position: absolute; 
	bottom: 0;
}
.banner {
	width: 100%;
	max-width: 800px;
	min-width: 300px;
	margin: 0 auto;
}
.span_1_of_4draw {
	width: 25%;
	height: 100%;
	background-attachment: local; 
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png");
}
.span_1_of_4graph {
	width: 25%;
	height: 100%;
	background-attachment: local; 
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png");
}
.span_1_of_4pix {
	width: 25%;
	height: 100%;
	background-attachment: local; 
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png");
}
.span_1_of_4ani {
	width: 25%;
	height: 100%;
	background-attachment: local; 
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("https://dl.dropboxusercontent.com/u/8624213/ScrewAttack8WPS.png");
}
footer {
	width: auto;
    height: auto;
    position: absolute;
    margin-top: 0;
    margin-bottom: 0;
    bottom:0;
    left:0;
    display: table-row;
	text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<!DOCTYPE html>
	<script src="/doodleplex/storage/themes/RonTheme/inc/jquery.bgswitcher.js"></script>
	<body>
	<div class="section header group">
		<div class="col span_4_of_4banner">
			<img class="banner" src="https://dl.dropboxusercontent.com/u/8624213/ronochromaticBannerS.png"/>
		</div>
	</div>
	<div class="section content group">
		<div class="col span_1_of_4draw">
		1 of 4 draw
		</div>
		<div class="col span_1_of_4graph">
		1 of 4 graphics
		</div>
		<div class="col span_1_of_4pix">
		1 of 4 pixelwork
		</div>
		<div class="col span_1_of_4ani">
		1 of 4 animation
		</div>
	</div>
	<div class="section footer group">
		<div class="col span_4_of_4footer">
			{{ site.copyright }}
		</div>
	</div>
	</body>
</html>

＆＃13;

任何人都知道我做错了什么？

Answer 1

鉴于您对网站的描述，您应该能够使用绝对位置或固定位置以及顶部/底部来处理此位置：

http://jsfiddle.net/xn4hzhts/

注意内容溢出。允许它可滚动（因此内容可以在＆＃34;下面＆＃34;顶部和底部）。

<div class="top">This is your nav bar/header</div>
<div class="content">Put your pages' stuff here</div>
<div class="bottom">This is your footer</div>

.top
{
    position: absolute;
    top: 0em;
    left: 0em;
    right: 0em;
    height: 4em;
    background-color: #cccccc;
}

.content
{
    position: absolute;
    top: 4em;
    bottom: 4em;
    left: 0em;
    right: 0em;
    background-color: yellow;
    overflow: hidden;
    overflow-y: scroll;
}

.bottom
{
    position: absolute;
    bottom: 0em;
    left: 0em;
    right: 0em;
    height: 4em;
    background-color: #cccccc;
}

使内容div填充可变高度标题和固定高度页脚之间的空格

1 个答案: