div容器应填写100％的网站

时间：2017-02-15 19:38:57

标签： html css height styling

嘿，我目前正在开发一个小网站。到现在为止我有一个标题，已经正常工作。

我的div只有内容问题。

我正在尝试使内容在y轴上100％填满网站。 为此，我用高度：100％;

不幸的是，当div中有更多文本时，div不能填充所有内容，您可以向下滚动。

有谁知道如何让div扩展？！

我可以更好地格式化这个问题，这个问题很难解释。 

@charset "utf-8";

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #F2F2F2; 
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
	position: fixed;
	background: #333333;
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
	top: 0;
}

#header-content {
	background: #333333;
	width: 1280px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	position: absolute;
}

#profile {
	position: absolute;
	margin-left: 100px;
}

#profile-icon {
	position: absolute;
	top: 7.5px;
	left: 0;
}

#profilename {
	position: absolute;
	top: 0;
	width: 110px;
	height: 20px;
	margin-left: 36px;
	padding: 15px 15px 15px 15px;
	color: #F2F2F2;
	text-decoration: none;
	font-size: 14px;
}

#profilename:hover {
	cursor: pointer;
	color: #2997D3;
	transition: all 300ms;
}

#button-profile {
	width: 100px;
	height: 20px;
}

#sections_panel{
	position: absolute;
	background: #333333;
	height: 0px;
	width: 140px;
	top: 50px;
	left: 50px;
	border-radius: 0px 0px 8px 8px;
	overflow: hidden;
	z-index: 1000;
	transition: height 0.3s linear 0s;
}

#sections_panel  div{
	background:#333;
	padding: 6px;
	height: 238px;
	margin: 10px;
	color: #FC0;
}

#search-box {
	position: absolute;
	background: #333333;
	margin-left: 250px;
}

#search {
	position: absolute;
	background: #fff;
	width: 412px;
	height: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 6px 0 0 6px;	
}

#submit {
	position: absolute;
	background: #fff;
	width: 28px;
	height: 28px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 476px;
	padding: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0 6px 6px 0;	
}

#menu {
	margin-right: 50px;
	margin-left: 25px;
}

.menu-linkbox *{
	position: static;
	float: right;
	width: auto;
	height: 14px;
	top: 0;
	padding: 18px 15px 18px 15px;
	color: #F2F2F2;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
}

.menu-linkbox:hover a {
	color: #2997D3;
	transition: all 500ms;
}

#main-content {
	background: #fff;
	width: 1280px;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 50px;
	display: block;
}

#content-articles {
	background: #F2F2F2;
	width: 1220px;
	height: 100%;
	bottom: 0;
	margin: 20px;
	padding: 10px;
	border: 1px solid #000;
	overflow: visible;
}

#article1 {
	width: 40%;
	float: left;
	margin: 20px;
	text-align: justify;
	word-spacing: 4px;
}

#article2 {
	width: 40%;
	float: right;
	margin: 20px;
	text-align: justify;
	word-spacing: 4px;
}

#article3 {
	width: 40%;
	float: left;
	margin: 20px;
	text-align: justify;
	word-spacing: 4px;
}

#article4 {
	width: 40%;
	float: right;
	margin: 20px;
	text-align: justify;
	word-spacing: 4px;
}

#player {
	background: #333333;
	position : fixed;
	bottom: 0;
	width: 100%;
	height: 50px;
}

#player-content {
	background: #333333;
	width: auto;
	height: 50px;
	margin-left: 200px;
	margin-right: 200px;
	font-size: 25px;
	
}

h1 {
	color: #2997D3;
	font-size: 20px;
	text-align: center;
	margin-bottom: 20px; 	
}

p {
	margin: 20px;
	
	
}
<!doctype html>
<html>

	<head> 
	
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="stylesheet.css">
		
		<title>SleekPlayer</title>
		
		<script>
			function toggleNavPanel(x){
				var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
				if(panel.style.height == maxH){
					panel.style.height = "0px";
					navarrow.innerHTML = "&#9662;";
				} 
			
				else {
					panel.style.height = maxH;
					navarrow.innerHTML = "&#9652;";
				}
			}
		</script>
	
	</head>
	
	<body>
	
		<div id="header">
		
			<div id="header-content">
		
				<img id ="logo" src="images/logo.png" />
				
				<div id="profile">

					<img id ="profile-icon" src="images/profile-icon.png" />
				
					<div id="profilename" onclick="toggleNavPanel('sections_panel')">
				
						<div id="button-profile"> Profilename <span id="navarrow">&#9662;</span></div>
				
					</div>
					
					<div id="sections_panel">
						
						<div>
							
						</div>
						
					</div>
				
				</div>
			
				<div id="search-box">
			
					<form action="http://www.google.com/search" method="get">
			
						<input id="search" type="text" name="q" placeholder="Suche">
			
						<input id="submit" type="image" src="images/search.png" alt="Submit">
		 
					</form>
			
				</div>
				
				<div id="menu">					
					
					<div class="menu-linkbox"><a href="https://www.youtube.com/">Aktuelles</a></div>
						
					<div class="menu-linkbox"><a href="https://google.de/">Neues</a></div> 

					<div class="menu-linkbox"><a href="https://facebook.com/">Interessantes</a></div>

					<div class="menu-linkbox"><a href="https://twitter.com/">Allgemeines</a></div>
					
				</div>
			
			</div>
			
		</div>
		
		<div id="main-content">
		
			<div id="content-articles">
			
				<div id="article1">	
					
					<h1>Assignment</h1>
			
					<p>
			
					Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.

					Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.

					Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.

					Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.

					Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
			
					</p>
			
				</div>
				
				<div id="article2">	
					
					<h1>Assignment</h1>
			
					<p>
			
					Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.

					Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.

					Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.

					Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.

					Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
			
					</p>
				
				</div>
				
				<div id="article3">	
					
					<h1>Assignment</h1>
			
					<p>
					
					Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.

					Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.

					Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.

					Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.

					Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
			
					</p>
			
				</div>
				
				<div id="article4">	
					
					<h1>Assignment</h1>
			
					<p>
			
					Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.

					Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.

					Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.

					Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.

					Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
			
					</p>
			
				</div>
				
			
			</div>
		
		</div>
		
	<!--
		<div id="player">
			
			<div id="player-content">
			
			
			
			</div>	

		</div>
	-->
	
	</body>

</html>

1 个答案:

答案 0 :(得分：-1)

请查看此Updated Fiddle 

int add(int _d, int _r){ // _d is "direct" and _r is "reversed" number
    int result = _d;
    if(_r > 99){ // 3 digits
      result += _r;
    }else if(_r > 9){ // only 2 digits
      result += _r * 10;
    }else{ // only 1 digit
      result += _r * 100;
    }
    return result;
}
相关问题
最新问题