内容颠覆其他内容

时间：2016-04-22 18:10:00

标签： html css

当我向代码中添加内容时，它会使我的页面和页脚崩溃。我无法弄清楚原因！当我添加最小的内容时，它会使我的页面元素大量减少并且遍布整个地方。任何帮助，将不胜感激。不确定我是否正确发布此代码，如果我需要做任何事情，请告诉我。

＆＃13;
＆＃13; 
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img{
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

body {
	padding-top:2em;
	font:normal 100%/150% "segoe ui",helvetica,sans-serif;
	background-image: url(http://oi68.tinypic.com/9tzv4n.jpg);
	max-width: 100%;
	height: auto;
    background-repeat: repeat;
	color:#FFF;
}

p {
	margin-top:20px;
}




#bottom {
	
    background-image: url("http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png");
    width:100%;
    margin-top:20px;
    position: absolute;
  
}



#page {
	 background:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png');
	 width:100%;
	 min-height:1000px;
	 margin-top:-55px;
	 margin-bottom:100px;
	 position:absolute;
 
}



h1 {

	position:relative;
	z-index: 7;
	font:bold 40px/42px arial,helvetica,sans-serif;
	background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png) bottom left repeat-x;
	text-align:center;
	margin-top:20px;
	background-image: url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1BottomStripe.png), url(http://oi67.tinypic.com/33dfi86.jpg);
    background-repeat: repeat-x, repeat;
    background-position: bottom left, bottom left;
	
}


h1 a {
	position:relative;
	zoom:1; /* trip haslayout, fix legacy IE bugs */
	display:block;
	padding:30px 0;
	text-transform:uppercase;
	color:#FFF;
	text-decoration:none;
	text-shadow:
		0 0 2px #000,
		2px 2px 3px #754;
}

h1 span {
	position:absolute;
	top:50%;
	left:50%;
	width:402px;
	height:160px;
	margin:-80px 0 0 -201px;
	text-indent:-999em;
	background:url(http://www.cutcodedown.com/for_others/barrelPony/sandmannFarm/images/h1Logo.png);
}



h1 small {
	display:block;
	font:bold 16px/18px arial,helvetica,sans-serif;

}



#mainMenuCheck {
	/* display none breaks this in some browsers, so just slide it out of view */
	position:absolute;
	left:-999em;
}

#mainMenu {
	position:relative; /* depth sort over h1 */
	background:#754 url(images/dots.png) top left;
	padding:0.75em 0 0.75em 0.75em;
	/* left margin adjusts for uneven menu width, change as needed */
	text-align:center;
}

#mainMenu li {
	list-style:none;
	display:inline;
}

#mainMenu ul:before,
#mainMenu ul:after,
#mainMenu:after,
#mainMenu a {
	text-shadow:
		0 0 2px #000,
		2px 2px 2px #000,
		2px 2px 3px #000;
}

#mainMenu a {
	display:inline-block;
	vertical-align:bottom;
	text-decoration:none;
	color:#F0E8E0;
	-webkit-transition:color 0.3s, text-shadow 0.3s;
	transition:color 0.3s, text-shadow 0.3s;
}

#mainMenu a.current {
	color:#87C6BC;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#87C6BC;
}

#mainMenu a:after {
	display:inline-block;
	padding:0 0.1em 0 0.5em;
	color:#FFF;
}

#mainMenu .lastInSet a:after {
	display:none;
}

#mainMenu .setBreak {
	padding-right:8em;
}

#mainMenu a:after,
#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
	content:"\2605";
	font-family:"arial unicode ms","dejavu sans",lastresort,sans-serif;
}

#mainMenu:after,
#mainMenu ul:before,
#mainMenu ul:after {
	position:absolute;
	left:50%;
	width:3em;
	bottom:0.65em;
}

#mainMenu:after {
	bottom:0.2em;
	font-size:150%;
	margin-left:-1.5em;
}

#mainMenu ul:before {
	margin-left:-3em;
}

@media (min-width:1px) { /* sneaky trick to target just CSS3 browsers */
/*
	h1 span {
		background:url(images/h1Logo2x.png);
		background-size:cover;
	}
	uncomment for 2x resolution logo support
*/
}

@media (max-width:50em) {
	#mainMenu {
		padding:1em 0 0.5em;
	}
	#mainMenu ul {
		max-width:25em;
		margin:0 auto;
	}
	#mainMenu .setBreak {
		padding-right:0;
	}
	/*
		restyle menu to 'mobile friendly' finger-sized targets
	*/
	#mainMenu:after,
	#mainMenu a:after,
	#mainMenu ul:before,
	#mainMenu ul:after {
		
	}
	#mainMenu a {
		padding:0.5em 1em;
		margin:0 0.15em 0.5em;
		background:rgba(0,0,0,0.3);
		-webkit-border-radius:1em;
		border-radius:1em;
	}
}

@media (max-width:26em) {
	body {
		padding-top:0;
	}
	h1 {
		text-align:left;
		font:bold 150%/120% arial,helvetica,sans-serif;
		
	}
	h1 a {
		padding:0.25em 3em 0.25em 0.25em;
		
	}
	h1 small {
		font:bold 80%/120% "segoe ui",arial,helvetica,sans-serif;
		padding-bottom:15px;
		
	}
	h1 span,
	#mainMenu:before {
		display:none;
	}
	#mainMenuCheck + label {
		position:absolute;
		z-index:99;
		right:0.25em;
		top:0.3em;
		width:3em;
		padding:0.5em 0;
		background:#488;
		border:0.25em solid #FFF;
		-webkit-border-radius:0.75em;
		border-radius:0.75em;
		display:none;
	}
	#mainMenuCheck + label:hover {
		background:#6BB;
		display: none;
	}
	#mainMenuCheck + label:before,
	#mainMenuCheck + label:after {
		content:"";
		display:block;
		height:0.5em;
		margin:0 0.5em;
		border:solid #FFF;
		border-width:0.25em 0;


	}
	#mainMenuCheck + label:after {
		border-width:0 0 0.25em;
		
	}
	#mainMenu {
		display:none;
		padding:0.5em 0.5em 0;
	}
	#mainMenuCheck:checked ~ #mainMenu {
		display:block;

	
	}
}


/**MENU**/

@media (min-width:52em) {

	.header {
		display: none;
	}

	.menu {
		display: none;
	}


}

@media (max-width:52em) {

	body {
	  z-index: 100; 
	  margin:;
	  font-family: font:bold 16px/18px arial,helvetica,sans-serif;
	  background-color: #f4f4f4;
	  

	}

	a {
	  color: #F8F4E6;
	  text-shadow:
		0 0 5px #000,
		5px 5px 5px #754;
	}

	.menu a:before,
	.menu ul:before,
	.menu ul:before {
		content:"\2605";

	}


	/* header */

	.header {
	  background-color:#6A4E39;
	  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
	  position: relative;
	  width: 100%;
	  z-index: 3;


	}

	.header ul {
	  margin: 0;
	  padding: 0;
	  list-style: none;
	  overflow: hidden;
	  background-image:none;

	}

	.header li a {
	  display: block;
	  padding: 20px 20px;
	  border-right: 1px solid #f4f4f4;
	  text-decoration: none;
	}

	.header li a:hover,
	.header .menu-btn:hover {
		background-color:#4EB4AC;
	  
	}

	.header .logo {
	  display: block;
	  float: left;
	  font-size: 15px;
	  padding: 10px 20px;
	  margin-top: 5px;
	  text-decoration: none;
	}

	/* menu */

	.header .menu {
	  clear: both;
	  max-height: 0;
	  transition: max-height .2s ease-out;
	}

	/* menu icon */

	.header .menu-icon {
	  cursor: pointer;
	  display: inline-block;
	  float: right;
	  padding: 28px 20px;
	  position: relative;
	  user-select: none;
	}

	.header .menu-icon .navicon {
	  background: #F8F4E6;
	  display: block;
	  height: 2px;
	  position: relative;
	  transition: background .2s ease-out;
	  width: 18px;
	}

	.header .menu-icon .navicon:before,
	.header .menu-icon .navicon:after {
	  background: #F8F4E6;
	  content: '';
	  display: block;
	  height: 100%;
	  position: absolute;
	  transition: all .2s ease-out;
	  width: 100%;
	}

	.header .menu-icon .navicon:before {
	  top: 5px;
	}

	.header .menu-icon .navicon:after {
	  top: -5px;
	}

	/* menu btn */

	.header .menu-btn {
	  display: none;
	}

	.header .menu-btn:checked ~ .menu {
	  max-height: none;
	}

	.header .menu-btn:checked ~ .menu-icon .navicon {
	  background: transparent;
	}

	.header .menu-btn:checked ~ .menu-icon .navicon:before {
	  transform: rotate(-45deg);
	}

	.header .menu-btn:checked ~ .menu-icon .navicon:after {
	  transform: rotate(45deg);
	}

	.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	  top: 0;
	}
}

/* 48em = 768px */

@media (min-width: 52em) {
  .header li {
  float: left;
 
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

@media (max-width: 52em) {
  #mainMenu {
  	display: none;
  	justify-content: center;
  }


/* section */

.section {
  overflow: hidden;
  margin: auto;
  max-width: 1400px;
}

.section a {
  position: relative;
  float: left;
  width: 100%;
}

.section a img {
  width: 100%;
  display: block;
}

.section a span {
  color: #fff;
  position: absolute;
  left: 5%;
  bottom: 5%;
  font-size: 2em;
  text-shadow: 1px 1px 0 #000;
}

.section-split a span {
  display: none;
}

.section-split a:hover span {
  display: block;
}


/* 48em = 768px */

@media (min-width: 48em) {
  .section-split a {
    width: 50%;
  }
}
＆＃13; 
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>Sandmann Farm</title>

</head>


<body>



<h1>
	<a href="/">
		Sandmann Farm
		<span>-</span>
		<small>EST. 1975</small>
	</a>
</h1>

 
<!--Menu -->

<input type="checkbox" id="mainMenuCheck">
<label for="mainMenuCheck"></label>

<div id="mainMenu">
	<ul>

		<li><a href="#" class="current">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">What We Do</a></li>
		<li class="lastInSet setBreak"><a href="#">Events</a></li>
		
		<li><a href="#">Success Stories</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">Events</a></li>
		<li class="lastInSet"><a href="#">Blog</a></li>

	</ul>

<!-- #mainMenu --></div>


<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css" />
<header class="header">
  <a href="/" class="logo">Navigation</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">     Home</a></li>
    <li><a href="#about">     About</a></li>
    <li><a href="#careers">     What We Do</a></li>
    <li><a href="#contact">     Success Stories</a></li>
    <li><a href="#contact">     Contact</a></li>
    <li><a href="#contact">     Events</a></li>
    <li><a href="#contact">     Blog</a></li>
  </ul>
</header>

	
<!-- Page -->
  
  <div id="page"></div>
 	<h1>Hello World!</h1>

<!--Header -->

	<div id="sawtoothb"></div>

	<div style="height: 100px; background-image:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Sawtooth_zps67oxpl7p.png'); background-repeat:repeat-x; margin-top: -110px;">
	</div>

<!--Footer -->

	<div id="footer"></div>
	<div id="bottom"></div>

	<div></div>
	<div style="height: 100px; background-image:url('http://oi66.tinypic.com/2ufrt77.jpg'); background-repeat:repeat-x; margin-top: -40px;margin-bottom:25px;">
	</div>

</body></html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

没有任何事情被打倒，你#page只有一个巨大的min-height。设置min-height意味着无论你定义什么，在你的情况下min-height:1000px将是该元素的 mininum 高度，它将永远不会小于1000px，无论如何。

您可以在此处找到此声明：

#page {
     background:url('http://i1377.photobucket.com/albums/ah69/danalavelle3/Page_zpscom5uhou.png');
     width:100%;
     min-height:1000px;
     margin-top:-55px;
     margin-bottom:100px;
     position:absolute;
 }

只需删除min-height:1000px，我添加了 JSFiddle 以显示结果。

相关问题
最新问题