修复我的html的高度以适应屏幕

时间：2016-05-17 23:58:41

标签： html css

我正在尝试制作一款外观时尚的计算器，在多种屏幕尺寸上看起来不错。我已接近完成，但我无法在计算器下方获得额外的空白空间，我无法弄清楚如何修复它。请帮忙。 DX 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Kevin's Calculator</title>
		
		<style>
			html {height:100%; width:100%; margin:0px; bottom:0px;}
			body {background-color:black; height:100%; width:100%; display:block; margin:0px; padding:0px; bottom:0px;}
			.button {background-color: #cacacb; color:black; border:none; bottom:0px;
			 text-align:center; text-decoration:none; float:left; font-weight:bold;
			 display:block; font-size:32px; width:25%; height:14%; outline:none; margin:0px; padding:0px;}
			.mathPush {background-color: #0db2ff; margin:0px;}
			.button:hover {background-color:white;}
			.mathPush:hover {background-color:#80d6ff;}
			#keypad {display:block; width:100%; height:100%; margin:auto; bottom:0px;}
			#results {background-color:black; color:white; font-weight:bold; font-size:32px;
			text-align:left; width:100%; margin:auto; height:20%;}
			#calculator {position:relative; width:100%; height:100%; margin:0px; left:0px; right:0px; bottom:0vh;}
			#screen_1 {text-align:left; margin:auto; overflow-Y:hidden; overflow-X:hidden;
			text-overflow:hidden;}
			#zero {width:50%; text-align:left; text-indent:20%;}
		</style>
	</head>
	<body>
		<div id="calculator">
		<div id="results">
			<p id="screen_1"></p>
		</div>
		<div id="keypad">
			<button id="clear" class="button">C</button>
			<button id="inverse" class="button">+/-</button>
			<button id="precent" class="button">%</button>
			<button id="divide" class="button mathPush">/</button><br>
			<button id="nine" class="button">9</button>
			<button id="eight" class="button">8</button>
			<button id="seven" class="button">7</button>
			<button id="multiply" class="button mathPush">*</button><br>
			<button id="six" class="button">6</button>
			<button id="five" class="button">5</button>
			<button id="four" class="button">4</button>
			<button id="minus" class="button mathPush">-</button><br>
			<button id="three" class="button">3</button>
			<button id="two" class="button">2</button>
			<button id="one" class="button">1</button>
			<button id="plus" class="button mathPush">+</button><br>
			<button id="zero" class="button">0</button>
			<button id="dot" class="button">.</button>
			<button id="equal" class="button mathPush">=</button>
			
		</div>
		</div>
		<script>
	var firstArray = new Array;
	var secondArray = new Array;
	
	var next = false;
	
	var plusBoolean = false;
	var minusBoolean = false;
	var multiBoolean = false;
	var divideBoolean = false;
	
    var x = document.getElementById("screen_1");
    
    
		document.getElementById("one").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("1");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("1");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("two").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("2");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("2");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("three").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("3");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("3");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("four").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("4");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("4");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("five").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("5");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("5");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("six").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("6");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("6");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("seven").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("7");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("7");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("eight").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("8");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("8");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("nine").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("9");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("9");
			x.innerHTML = secondArray.join("");
		}
})
		document.getElementById("zero").addEventListener("click", function(){
		if (next == false) {
			firstArray.push("0");
			x.innerHTML = firstArray.join("");
		}
		else if (next == true) {
			secondArray.push("0");
			x.innerHTML = secondArray.join("");
		}
})

		document.getElementById("plus").addEventListener("click", function(){
		next = true;
		plusBoolean = true;
		minusBoolean = false;
		multiBoolean = false;
		divideBoolean = false;
		x.innerHTML = "";
})
		document.getElementById("minus").addEventListener("click", function(){
		next = true;
		plusBoolean = false;
		minusBoolean = true;
		multiBoolean = false;
		divideBoolean = false;
		x.innerHTML = "";
})
		document.getElementById("multiply").addEventListener("click", function(){
		next = true;
		plusBoolean = false;
		minusBoolean = false;
		multiBoolean = true;
		divideBoolean = false;
		x.innerHTML = "";
})
		document.getElementById("divide").addEventListener("click", function(){
		next = true;
		plusBoolean = false;
		minusBoolean = false;
		multiBoolean = false;
		divideBoolean = true;
		x.innerHTML = "";
})
		document.getElementById("equal").addEventListener("click", function(){
		if (plusBoolean == true) {
			firstArray = [Number(firstArray.join("")) + Number(secondArray.join(""))];
			x.innerHTML = firstArray[0];
			secondArray = [];
			console.log(firstArray[0]);
		}
		else if (minusBoolean == true) {
			firstArray = [Number(firstArray.join("")) - Number(secondArray.join(""))];
			x.innerHTML = firstArray[0];
			secondArray = [];
			console.log(firstArray[0]);
		}
		else if (multiBoolean == true) {
			firstArray = [Number(firstArray.join("")) * Number(secondArray.join(""))];
			x.innerHTML = firstArray[0];
			secondArray = [];
			console.log(firstArray[0]);
		}
		else if (divideBoolean == true) {
			firstArray = [Number(firstArray.join("")) / Number(secondArray.join(""))];
			x.innerHTML = firstArray[0];
			secondArray = [];
			console.log(firstArray[0]);
		}
})
		document.getElementById("clear").addEventListener("click", function(){
		firstArray = [];
		secondArray = [];
		
		next = false;
		plusBoolean = false;
		minusBoolean = false;
		multiBoolean = false;
		divideBoolean = false;
		x.innerHTML = "";
})
		</script>

	</body>
</html>

1 个答案:

答案 0 :(得分：0)

因为你有5行按钮，每个按钮只有一个height: 20%;而不是height: 14%;而且你的结果有height: 20%给你的键盘height: 80%而不是height: 100% <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Kevin's Calculator</title> <style> html {height:100%; width:100%; margin:0px; bottom:0px;} body {background-color:black; height:100%; width:100%; display:block; margin:0px; padding:0px; bottom:0px;} .button {background-color: #cacacb; color:black; border:none; bottom:0px; text-align:center; text-decoration:none; float:left; font-weight:bold; display:block; font-size:32px; width:25%; height:20%; outline:none; margin:0px; padding:0px;} .mathPush {background-color: #0db2ff; margin:0px;} .button:hover {background-color:white;} .mathPush:hover {background-color:#80d6ff;} #keypad {display:block; width:100%; height:80%; margin:auto; bottom:0px;} #results {background-color:black; color:white; font-weight:bold; font-size:32px; text-align:left; width:100%; margin:auto; height:20%;} #calculator {position:relative; width:100%; height:100%; margin:0px; left:0px; right:0px; bottom:0vh;} #screen_1 {text-align:left; margin:auto; overflow-Y:hidden; overflow-X:hidden; text-overflow:hidden;} #zero {width:50%; text-align:left; text-indent:20%;} </style> </head> <body> <div id="calculator"> <div id="results"> <p id="screen_1"></p> </div> <div id="keypad"> <button id="clear" class="button">C</button> <button id="inverse" class="button">+/-</button> <button id="precent" class="button">%</button> <button id="divide" class="button mathPush">/</button><br> <button id="nine" class="button">9</button> <button id="eight" class="button">8</button> <button id="seven" class="button">7</button> <button id="multiply" class="button mathPush">*</button><br> <button id="six" class="button">6</button> <button id="five" class="button">5</button> <button id="four" class="button">4</button> <button id="minus" class="button mathPush">-</button><br> <button id="three" class="button">3</button> <button id="two" class="button">2</button> <button id="one" class="button">1</button> <button id="plus" class="button mathPush">+</button><br> <button id="zero" class="button">0</button> <button id="dot" class="button">.</button> <button id="equal" class="button mathPush">=</button> </div> </div> <script> var firstArray = new Array; var secondArray = new Array; var next = false; var plusBoolean = false; var minusBoolean = false; var multiBoolean = false; var divideBoolean = false; var x = document.getElementById("screen_1"); document.getElementById("one").addEventListener("click", function(){ if (next == false) { firstArray.push("1"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("1"); x.innerHTML = secondArray.join(""); } }) document.getElementById("two").addEventListener("click", function(){ if (next == false) { firstArray.push("2"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("2"); x.innerHTML = secondArray.join(""); } }) document.getElementById("three").addEventListener("click", function(){ if (next == false) { firstArray.push("3"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("3"); x.innerHTML = secondArray.join(""); } }) document.getElementById("four").addEventListener("click", function(){ if (next == false) { firstArray.push("4"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("4"); x.innerHTML = secondArray.join(""); } }) document.getElementById("five").addEventListener("click", function(){ if (next == false) { firstArray.push("5"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("5"); x.innerHTML = secondArray.join(""); } }) document.getElementById("six").addEventListener("click", function(){ if (next == false) { firstArray.push("6"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("6"); x.innerHTML = secondArray.join(""); } }) document.getElementById("seven").addEventListener("click", function(){ if (next == false) { firstArray.push("7"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("7"); x.innerHTML = secondArray.join(""); } }) document.getElementById("eight").addEventListener("click", function(){ if (next == false) { firstArray.push("8"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("8"); x.innerHTML = secondArray.join(""); } }) document.getElementById("nine").addEventListener("click", function(){ if (next == false) { firstArray.push("9"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("9"); x.innerHTML = secondArray.join(""); } }) document.getElementById("zero").addEventListener("click", function(){ if (next == false) { firstArray.push("0"); x.innerHTML = firstArray.join(""); } else if (next == true) { secondArray.push("0"); x.innerHTML = secondArray.join(""); } }) document.getElementById("plus").addEventListener("click", function(){ next = true; plusBoolean = true; minusBoolean = false; multiBoolean = false; divideBoolean = false; x.innerHTML = ""; }) document.getElementById("minus").addEventListener("click", function(){ next = true; plusBoolean = false; minusBoolean = true; multiBoolean = false; divideBoolean = false; x.innerHTML = ""; }) document.getElementById("multiply").addEventListener("click", function(){ next = true; plusBoolean = false; minusBoolean = false; multiBoolean = true; divideBoolean = false; x.innerHTML = ""; }) document.getElementById("divide").addEventListener("click", function(){ next = true; plusBoolean = false; minusBoolean = false; multiBoolean = false; divideBoolean = true; x.innerHTML = ""; }) document.getElementById("equal").addEventListener("click", function(){ if (plusBoolean == true) { firstArray = [Number(firstArray.join("")) + Number(secondArray.join(""))]; x.innerHTML = firstArray[0]; secondArray = []; console.log(firstArray[0]); } else if (minusBoolean == true) { firstArray = [Number(firstArray.join("")) - Number(secondArray.join(""))]; x.innerHTML = firstArray[0]; secondArray = []; console.log(firstArray[0]); } else if (multiBoolean == true) { firstArray = [Number(firstArray.join("")) * Number(secondArray.join(""))]; x.innerHTML = firstArray[0]; secondArray = []; console.log(firstArray[0]); } else if (divideBoolean == true) { firstArray = [Number(firstArray.join("")) / Number(secondArray.join(""))]; x.innerHTML = firstArray[0]; secondArray = []; console.log(firstArray[0]); } }) document.getElementById("clear").addEventListener("click", function(){ firstArray = []; secondArray = []; next = false; plusBoolean = false; minusBoolean = false; multiBoolean = false; divideBoolean = false; x.innerHTML = ""; }) </script> </body> </html>。

double[] u1 = {4,2,3,5,3,4};
double[] u2 = {3,0,2,4,2,3};
double[] u3 = {5,0,4,4,4,5};
double[] u4 = {0,1,2,4,2,3};
double[] u5 = {0,3,4,4,4,5};
double[] u6 = {3,1,0,4,2,3};
double[] u7 = {2,5,3,0,3,4};
double[] u8 = {3,1,1,4,2,3};
double[] u9 = {3,1,2,3,2,3};

相关问题
最新问题