Question

我希望我的页面填满屏幕，即使它没有包含足够的内容。我已经做到了这一点，身高设定为100％。我还想要的是我的内容周围的空间，并通过添加5px的边距，它得到我想要的方式。我的问题是，我必须滚动才能看到整个页面，即使内容对于屏幕来说不是太长。我想这有一个简单的解决方案，但我似乎无法找到它。有谁可以吗？

＆＃13;

/* Allmänt */

html, body{
background: grey;
background-size: cover;
height: 100%;
}

#content{
background-color: white;
width: 1100px;
margin: 5px auto;
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}

/* Header */

#huvud{
width: 1000px;
height: 250px;
margin: 0 auto;
position: relative;
padding-top: 5px;
}

#header{
display: block;
}

/* Meny */

#nav-yttre{
width: 1000px;
height: 35px;
margin: 0 auto;
background-image: url("Rusty-bar2.jpg");
}

#nav-mitten{
display: table;
width: 100%;
padding: 10px;
}

#nav-inre{
display: table-row;
list-style: none;
font-family: 'Special Elite', Verdana, Arial, sans-serif;
font-size: 25px;
}

#nav-inre li{
display: table-cell;
}

#nav-inre li a{
display: block;
text-decoration: none;
text-align: center;
color: #eeeeee;
}

#nav-inre li #here{
color: #221f20;
}

#nav-inre li a:hover{
color: #221f20;
}

/* Main */

#main{
width: 980px;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 150px;
}

#fadein { 
margin: 10px auto;
position:relative; 
width:970px; 
height:215px; 
padding: 5px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#fadein img { 
position:absolute; 
}

#main-blogg{
width: 1050px;
margin: 0 auto;
}

#blogg{
min-height: 1000px;
}

/* Fot */

#fot{
width: 980px;
margin: 0 auto;
text-align: center;
}

#fot-inre{
border-top: solid #221f20 1px;
position: absolute;
bottom: 0;

}

#adress{
width: 327px;
float: left;
}

#kontakt{
width: 326px;
float: left;
}

#tider{
width: 326px;
float: right;
}

#design{
width: 500px;
margin: 0 auto;
clear: both;
text-align: center;
background-image: url("Rusty-bar-small.jpg");
}

#design p{
color: #eeeeee;
font-weight: bold;
}

#design a{
color: #eeeeee;
}

#design a:hover{
color: #221f20;
}

#rub{
font-weight: bold;
}

/* Allmänt */

p{
font-family: Verdana, Arial, sans-serif;
color: #221f20;
font-size: 0.9em;
}

＆＃13;

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stajlish.css">
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="stajlish.js"></script>
</head>

<body>

<div id="content">

	<div id="huvud">
		<img id="header" src="hej.jpg" alt="Header">
	</div>
	
	<div id="nav-yttre">
		<div id="nav-mitten">
			<ul id="nav-inre">
				<li><a href="index.html">HEM</a></li>
				<li><a href="om_oss.html">OM OSS</a></li>
				<li><a href="blogg.html">BLOGG</a></li>
				<li><a href="marken.html">M&Auml;RKEN</a></li>		
				<li><a href="hitta_hit.html">HITTA HIT</a></li>
			</ul>
		</div>
	</div>
	
	<div id="main">
	
		<div id="fadein">
			<img src="slides1.jpg">
			<img src="slides2.jpg">
			<img src="slides3.jpg">
		</div>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus quam lectus, in suscipit nisl luctus feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit eros, tempor sed bibendum nec, luctus in dui. Proin vitae tincidunt diam, a pulvinar tortor. Maecenas pulvinar rhoncus nisl quis aliquet. Nulla dolor metus, euismod ac gravida eget, congue at nunc. Etiam non urna vel dolor pulvinar finibus. Suspendisse eget lacinia massa. Morbi sodales non purus pretium congue. Nullam sed tellus diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla porta sapien sit amet placerat lobortis. Nunc sed orci tincidunt, lacinia massa ut, fringilla est. Maecenas sodales orci at erat malesuada, non tristique leo auctor. Suspendisse augue felis, lobortis rhoncus pharetra at, pretium sit amet dolor.</p>
		
	</div>
		
	<div id="fot">
	
		<div id="fot-inre">
	
		<div id="adress">
			<p id="rub">BES&Ouml;KSADRESS</p>
			<p>Hej</p>
		</div>
		
		<div id="kontakt">
			<p id="rub">KONTAKTA OSS</p>
			<p>Telefon: 08-123 45 67</p>
			<p>Mail: info@mail.se</p>
		</div>
		
		<div id="tider">
			<p id="rub">&Ouml;PPETTIDER</p>
			<p>Vardagar: 10-19<br>L&ouml;rdag: 10-17<br>S&ouml;ndag: 11-16</p>	
		</div>
		
		<div id="design">
			<p>Webbplatsen &auml;r gjord av Maria</p>
		</div>
		
		</div>

	</div>
	
</div>

</body>

＆＃13;

Answer 1

防弹全高！

*,
*:before,
*:after {
    -webkit-box-sizing:border-box;
    -mozbox-sizing:border-box;
    box-sizing:border-box;
}

html,
body {
    height:100%;
    height:100vh;
    margin:0;
    padding:0;
}

#content {
    height:auto !important;
    min-height:100%;
    min-height:100vh;
}

原因：

100vh，100%用作后备
border-box是布局功能的关键部分，用于在填充后支持recalc（因此width:50px实际上保持50px，而不是50px加填充），并且它可以正常工作回到IE8
将margin:0;padding:0;添加到html,body会消除其周围的空白区域...如果您在body上拼命想要填充，请单独添加（尽管您应该真的有它）无论你拥有什么容器都可以使用）

修改

因此，您仍然需要滚动的原因是因为border-box处理padding，而不是margin。如果您想在内容周围添加“空间”，请在其中添加填充：

#content { height:auto !important; min-height:100%; min-height:100vh; padding:5px 0; }

这将为您提供顶部和底部空间的效果。但是，如果（出于某种疯狂的原因）你真的需要margin超过padding，你可以使用calc：

#content { height:auto !important; min-height:calc(100% - 10px); min-height:calc(100vh - 10px); margin:5px auto; }

仅支持IE9及更高版本，但会为您提供所需内容。我高度建议反对它，因为你想要达到的目标更容易实现，而不涉及margin。

Answer 2

我会实施两件事。我会使用保险杠和计算。

<div class="bumper"></div>

.bumper {
    height:5px;
    width:100%;
}

将保险杠放在您想要填充的位置。然后使用calc来设置内容的高度。

#content {
    background-color: white;
    max-width:800px;
    padding: 5px;
    min-height:90%; //backup for browsers who do not support calc
    min-height:calc(100% -5px);
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
}
html, body {
    background: grey;
    height: 100%;
    margin:0px; //important
}

结果： http://jsfiddle.net/m/qes/

完整代码：http://jsfiddle.net/neoaptt/r2ddyg8e/

Answer 3

更改

html, body{
background: grey;
background-size: cover;
height: 100%;
}

到

html, body{
background: grey;
background-size: cover;
height: 100vh;
}

然后添加重置

*{box-sizing: border-box; padding: 0; margin: 0}

您可以阅读有关Sizing with CSS3's vw and vh units

的更多信息

Answer 4

问题：你必须滚动才能看到整个页面的原因是因为你给你的元素id内容的最小高度为100％，然后给它一个5px auto的余量。这基本上是说我希望我的内容元素在顶部具有100％+ 5px的高度，在边缘底部具有5px的高度。高度现在等于：（100％+ 10px）。

答案：如果您想要内容周围的空间，请使用内容元素上的填充属性而不是边距。这会将内容元素中的元素从顶部向内推5px，从底部向内推5px，而不会将内容元素的高度增加到100％。

看起来应该是这样的（未经测试）：

#content{
background-color: white;
width: 1100px;
padding: 5px auto; /* changed margin to padding */
border-radius: 5px;
position: relative;
height: auto !important;
min-height: 100%;
}

Answer 5

您的#content div上有一个上边距和下边距。将其删除并将其添加到body：

body {
    padding: 5px 0;
    box-sizing: border-box;
}

填充屏幕高度

5 个答案: