Question

＆＃13;

/*	Suburban Dogma Main Stylesheet
	v1.0 10/19/2014
	Author: Bob
*/
/*------------------------------------------------------------------------------Header Section--------------------------------------------------------------------------------*/
#social-icons {
	float: right;
	position: relative;
	top: 0.6em;
	right: 3em;
}
.soc-icon {
	margin-right: 0.3em;
}
.header {
	width: 100%;
	position: fixed;
    	background-color: #2C2C2C;
    	width: 100%;
    	height: 3em;
}
#menu-logo {
	max-width: 100%;
	max-height: 100%;
	position: relative;
	top: 0.7em;
	left: 0.3em;
}
#menu-square {
	max-width: 100%;
	max-height: 100%;
	position: relative;
	top: 0.6em;
	left: 0.3em;
}
#menu-title {
	text-decoration: none;
	position: relative;
	top: 0.3em;
	right: 0.6em;
	font-family: Verdana;
	font-weight: 700;
	font-size: 12px;
	color: #DDD;
}
#menu-logo-semi {
	display: none;
}
#menu-logo-small {
	display: none;
}
#icon-tw-dark {
	height: 30px;
	width: 30px;
}
/*---------------------------------------------------------------------------Menu Section-------------------------------------------------------------------------------------*/
.list-menu {
	padding: 0.9em 0em 0.9em 0.5em;
}
.list-header {
	background-color: #232323;
}
.list-header p {
	padding: 0.5em 0em 0.5em 1.5em;
	color: #606060;
	font-family: Verdana;
	font-weight: 700;
	font-size: 80%;
}
#section-two a:hover {
	color: #18bf13
}	
#section-three a:hover {
	color: #e2e21b;
}
#section-four a:hover {
	color: #ac1db7;
}
#section-home {
	position: relative;
	left: 0.1em;
    	background-image: url('../images/menu-icons/image-home.png');
    	background-position: left center;
    	background-repeat: no-repeat;
    	padding-left: 1.5em;
}
#section-one {
	position: relative;
	left: 0.1em;
    	background-image: url('../images/menu-icons/image-before-blue.png');
    	background-position: left center;
    	background-repeat: no-repeat;
    	padding-left: 1.5em;
}
#section-two {
	position: relative;
	left: 0.1em;
    	background-image: url('../images/menu-icons/image-before-green.png');
    	background-position: left center;
    	background-repeat: no-repeat;
    	padding-left: 1.5em;
}
#section-three {
	position: relative;
	left: 0.1em;
    	background-image: url('../images/menu-icons/image-before-yellow.png');
    	background-position: left center;
    	background-repeat: no-repeat;
    	padding-left: 1.5em;
}
#section-four {
	position: relative;
	left: 0.1em;
    	background-image: url('../images/menu-icons/image-before-purple.png');
    	background-position: left center;
    	background-repeat: no-repeat;
    	padding-left: 1.5em;
}
.other-section {
	padding-left: 1.5em;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Suburban Dogma | Magazine</title>
		
	<!--Metas-------------------------------------------------------------------------------------------------------------------->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	
	<!--Fonts----------------------------------------------------------------------------------------->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
	
	<!--Stylesheets/Scripts------------------------>
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="slidebars.min.css">
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="responsive-style.css">
</head>
<body>	
	
<!--All content-->
<div id="sb-site">
	<!--Top navigation bar--------->
	<div id="header" class="header">
			<!--Logo Image---------------------------------------------------------------------------->
			<a href="/index.html"><img id="menu-logo" src="../images/logo.svg"/></a>
			<a href="/index.html"><img id="menu-logo-semi" src="../images/logo-semi.svg"/></a>
			<a href="/index.html"><img id="menu-logo-small" src="../images/logo-short.svg"/></a>
			<!--Toggle sidebar menu----------------------------------------------------------------------------------------->
			<a href="#" class="sb-toggle-left button left-align"><img src="../images/menu48.svg" id="menu-square" class="icon"/></a>
			<!--Menu title-------------------------------------------------------------->
			<a href="#" id="menu-title" class="sb-toggle-left button left-align">MENU</a>
			<!--Row of social media icons/links------------------------------------------------------------------------------------------------------------------->
			<div id="social-icons">
				<a href="#"><img id="icon-fb" class="soc-icon" src="../images/menu-icons/icon-fb-dark.png" onmouseover="this.src='../images/menu-icons/icon-fb-color.png'" onmouseout="this.src='../images/menu-icons/icon-fb-dark.png'"/></a>
				<a href="#"><img id="icon-tw" class="soc-icon" src="../images/menu-icons/icon-tw-dark.png" onmouseover="this.src='../images/menu-icons/icon-tw-color.png'" onmouseout="this.src='../images/menu-icons/icon-tw-dark.png'"/></a>
				<a href="#"><img id="icon-ig" class="soc-icon" src="../images/menu-icons/icon-ig-dark.png" onmouseover="this.src='../images/menu-icons/icon-ig-color.png'" onmouseout="this.src='../images/menu-icons/icon-ig-dark.png'"/></a>
				<a href="#"><img id="icon-tu" class="soc-icon" src="../images/menu-icons/icon-tu-dark.png" onmouseover="this.src='../images/menu-icons/icon-tu-color.png'" onmouseout="this.src='../images/menu-icons/icon-tu-dark.png'"/></a>	
			</div>
	</div>
</div>
<!--Add left sidebar with push control-------->
<div class="sb-slidebar sb-left sb-style-push">
	<nav>
		<ul>
			<li id="section-home" class="list-menu"><a href="#">HOME</a></li>
			<li class="list-header"><p id="sections">SECTIONS</a></li>
			<li id="section-one" class="list-menu"><a href="#">Music</a></li>
			<li id="section-two" class="list-menu"><a href="#">Style</a></li>
			<li id="section-three" class="list-menu"><a href="#">Pop Culture</a></li>
			<li id="section-four" class="list-menu"><a href="#">Tech</a></li>
			<li class="list-header"><p id="other">OTHER</a></li>
			<li class="list-menu other-section"><a href="#">About Us</a></li>
			<li class="list-menu other-section"><a href="#">Contact</a></li>
		</ul>
	</nav>
</div>
<!--Link to jQuery and other scripts------------------------------------------------------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write( '<script src="jquery.min.js"><\/script>' )</script>

<!--Script to run slidebar------------------->	
<script src="slidebars.min.js"></script>
<script>
	(function($) {
		$(document).ready(function() {
			$.slidebars();
		});
	}) (jQuery);
</script>
</body>
</html>

＆＃13;

我终于在我的网站上创建了我的标题和所有内容，但现在当我尝试将内容添加到正文中时，它会像页脚一样卡在页面的最底部。
谁能给我一些见解呢？此外，当我尝试在我的标题div之后和我的网站div之前添加内容时，它并没有显示任何内容。
我使用了第三方jQuery插件，但我正确地使用了它，所以不应该影响它，但这里有一个参考：

My website in progress with the html and css

My menu usage guide in case you want to check the syntax on it

任何帮助都会非常感激，因为我现在仍然坚持这一点，我只是无法在导航菜单后正确显示任何HTML

如果您自己尝试编写代码，可以跳过reset.css和responsive.css，因为这些是不言自明的。

Answer 1

这很简单。您的标头设置为position: fixed，因此当您在标头下方添加内容时，它实际上位于标题后面，因为fixed会将元素从文档流中分离出来。至于底部的文字。 min-height: 518px上有#sb-site。因此，如果您将内容置于#sb-site之下（而不是其中），则其内容将低于518px。

html卡在页面底部

1 个答案: