html - 用高度填充屏幕

我希望我的页面充满屏幕，即使它没有包含足够的内容。我已经将 body 的高度设置为 100%，从而实现了这一点。我还想要的是在我的内容周围留出一些空间，通过在边距上增加 5px，它就能达到我想要的效果。我的问题是我必须滚动才能看到整个页面，即使内容对于屏幕来说不是太长。我想对此有一个简单的解决方案，但我似乎找不到。谁能？

/* 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;
}

<?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>

最佳答案

防弹全高!

*,
*: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 在 IE9 及更高版本(基本上任何其他版本)中都受支持，100% 用作后备
border-box 是布局功能的关键部分，支持填充后重新计算(因此 width:50px 实际上仍然是 50px，而不是50px 加上 padding)，它可以回到 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的方式实现。

关于html - 用高度填充屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27507032/

html - 用高度填充屏幕

上一篇：javascript - 只切换最近的 DIV

下一篇：css - 是否可以填充剩余的宽度？