我的页脚大小是应该的两倍

Question

我正在尝试将HTML CSS添加到我的Microsoft Sharepoint页面。我两周前开始学习HTML CSS，所以这对我来说是新的。我的脚本使我的页脚在向下滚动时包含了大约30％的页面。我怎样才能解决这个问题。我希望页脚可能与页眉一样大。

<style>
		body {
			margin: 0;
		}
		p {
			font-family: 'Open Sans Condensed', sans-serif;
		}
		.header {
			background-color: skyblue;
			height: 100px;
			text-align: center;
			color: #4f889f;
			padding: 1px;
		}
                .container{ 
                          width:100%;
                          position: relative;
                           }
		.container div {
			padding: 1%;
			box-sizing: border-box;
			min-height: 700px;
                        height:100%;
		}
                  
		.left-col, .right-col {
			background-color: #f4f4f4;
			width: 25%;
			float: left;
		}
		.center-col {
			width: 50%;
			float: left;
		}
		.footer {
			clear: both;
			font-family: 'Amatica SC', cursive;
			background-color: skyblue;
			text-align: center;
			height: 50px;
			padding-top: 10px;
			box-sizing: border-box;
		}
	</style>

<div class="header">
	<h1>The 3 Column Layout</h1>
</div>
<div class="container">
	<div class="left-col">
    		<img src="Cyber.jpg" width="200" height=150"/>
             <p><p>Morbi volutpat turpis pretium </p>

	
	</div>
	<div class="center-col">
		<h2>Center</h2>
		<p>Integer interdum finibus tempor.</p>
	</div>
	<div class="right-col">
		<img src="Random.jpg" width="200" height=150"/>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>
<div class="footer">
	&copy; All Rights Reserved.
</div>
</body>

Answer 1

代码似乎运行良好，但是div的高度可能会导致您遇到此问题。因此，尽管页脚实际上并没有下降那么远，但由于页面的大小，页脚下方仍有很多空白，因此无论您在何处运行此项目，它都将显示蓝色。

一种解决方法是增加.container div的高度。由于一旦更改了最小高度或最小高度，它就会更改页脚所在的位置及其下方的空白。

您也可以将页脚固定在底部。将此添加到.footer：

 position: absolute;
 bottom: 0;
 width: 100%;

这会将页脚保留在页面底部。

如果这些方法不能解决您的问题，请告诉我。旁注，请确保在HTML中用<img>标签的引号引起来的“ height”内联样式。我注意到他们缺少最左边的引号。您的html：height=150"/>。首选：height="150"/>。这不是造成您的问题，但以为我还是会提及它