如何使主要内容div填充屏幕的高度与CSS
所以我有一个页眉，主体和页脚的网页。 我希望主体填充100％的页面（在页脚和页眉之间填充100％）我的页脚是绝对位置，底部为0.每当我尝试将主体设置为100％高度或更改位置或东西时，它也将溢出标题。 如果将body设置为绝对top: 40 （导致我的标题是40px高），它将只是下降40px，创build一个滚动条。
我创build了一个简单的html文件，因为我实际上不能从实际项目中发布整个页面/ css。 使用示例代码，即使maincontent主体填满了屏幕，它也会下降40px（引起我的头）。
html, body{ margin: 0; padding: 0;} header{ height: 40px; width: 100%; background-color: blue; } #maincontent{ background-color: green; height: 100%; width: 100%; } footer{ height: 40px; width: 100%; background-color: grey; position: absolute; bottom: 0; }
的HTML
<html> <head> <title>test</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <header></header> <div id="maincontent"> </div> <footer></footer> </body> </html>
任何人都知道答案？
- 不需要％的高度
- 不需要jQuery
（！）使用bottom＆top展开div：
.mainbody{ position: absolute; top: 40px; /* Header Height */ bottom: 20px; /* Footer Height */ width: 100%; }
检查我的代码： http : //jsfiddle.net/aslancods/mW9WF/
没有JavaScript，没有绝对的位置，没有固定的高度是必需的这一个。
以下是一个不需要固定高度或绝对定位的 CSS / CSS唯一方法：
CSS
.container { display: table; } .content { display: table-row; height: 100%; } .content-body { display: table-cell; }
HTML
<div class="container"> <header class="header"> <p>This is the header</p> </header> <section class="content"> <div class="content-body"> <p>This is the content.</p> </div> </section> <footer class="footer"> <p>This is the footer.</p> </footer> </div>
在这里看到它的行动： http : //jsfiddle.net/AzLQY/
这种方法的好处是页脚和页眉可以增长以匹配他们的内容，身体会自动调整自己。 你也可以select用css限制它们的高度。
有一个称为视口高度/视口宽度的CSS单位。
例
.mainbody{height: 100vh;}同样的html,body{width: 100vw;}
或90vh =视口高度的90％。
** IE9 +和最现代的浏览器。
这允许以最小宽度为中心的内容主体为我的表单不崩溃滑稽：
html { overflow-y: scroll; height: 100%; margin: 0px auto; padding: 0; } body { height: 100%; margin: 0px auto; max-width: 960px; min-width: 750px; padding: 0; } div#footer { width: 100%; position: absolute; bottom: 0; left: 0; height: 60px; } div#wrapper { height: auto !important; min-height: 100%; height: 100%; position: relative; overflow: hidden; } div#pageContent { padding-bottom: 60px; } div#header { width: 100%; }
我的布局页面如下所示：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="pageContent"></div> <div id="footer"></div> </div> </body> </html>
例如： http : //data.nwtresearch.com/
还有一点需要注意的是，如果你想要像添加的代码一样的完整的页面背景，请删除height: auto !important; 从包装div： http : //jsfiddle.net/mdares/a8VVw/
使用top: 40px和bottom: 40px （假设您的页脚也是40px）没有定义的高度，你可以得到这个工作。
.header { width: 100%; height: 40px; position: absolute; top: 0; background-color:red; } .mainBody { width: 100%; top: 40px; bottom: 40px; position: absolute; background-color: gray; } .footer { width: 100%; height: 40px; position: absolute; bottom: 0; background-color: blue; }
的jsfiddle
不知道你以后到底是什么，但我想我明白了。
标题 – 停留在屏幕的顶部？ 页脚 – 停留在屏幕的底部？ 内容区域 – >适合页脚和标题之间的空间？
你可以通过绝对定位或固定位置来做到这一点。
这是一个绝对定位的例子： http : //jsfiddle.net/FMYXY/1/
标记：
<div class="header">Header</div> <div class="mainbody">Main Body</div> <div class="footer">Footer</div>
CSS：
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;} .mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;} .footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
为了使其效果最好，我build议使用％而不是像素，因为你会遇到不同的屏幕/设备尺寸的问题。
那么，不同的浏览器有不同的实现。
在我看来，最简单和最优雅的解决scheme是使用CSS calc（）。 不幸的是，这个方法在ie8和更less的版本中是不可用的，在android浏览器和移动歌剧中也是不可用的。 如果你使用不同的方法，你可以试试这个： http : //jsfiddle.net/uRskD/
标记：
<div id="header"></div> <div id="body"></div> <div id="footer"></div>
而CSS：
html, body { height: 100%; margin: 0; } #header { background: #f0f; height: 20px; } #footer { background: #f0f; height: 20px; } #body { background: #0f0; min-height: calc(100% - 40px); }
我的第二个解决scheme涉及粘页脚方法和框大小。 这基本上允许body元素填充其父项的100％的高度，并且在100％的box-sizing: border-box;包含填充box-sizing: border-box; 。 http://jsfiddle.net/uRskD/1/
html, body { height: 100%; margin: 0; } #header { background: #f0f; height: 20px; position: absolute; top: 0; left: 0; right: 0; } #footer { background: #f0f; height: 20px; position: absolute; bottom: 0; left: 0; right: 0; } #body { background: #0f0; min-height: 100%; box-sizing: border-box; padding-top: 20px; padding-bottom: 20px; }
我的第三种方法是使用jQuery来设置主要内容区域的最小高度。 http://jsfiddle.net/uRskD/2/
html, body { height: 100%; margin: 0; } #header { background: #f0f; height: 20px; } #footer { background: #f0f; height: 20px; } #body { background: #0f0; }
而JS：
$(function() { headerHeight = $('#header').height(); footerHeight = $('#footer').height(); windowHeight = $(window).height(); $('#body').css('min-height', windowHeight - headerHeight - footerHeight); });
相对值如：height：100％将使用HTML中的父元素（如引用），要使用相对值的高度，您需要使html和body标签具有100％的高度：
HTML
<body> <div class='content'></div> </body>
CSS
html, body { height: 100%; } .content { background: red; width: 100%; height: 100%; }
虽然这可能听起来像一个简单的问题，但实际上并不是这样！
我已经尝试了很多东西来实现你用纯CSS做的事情，而我所有的尝试都是失败的。 但..有一个可能的解决scheme，如果你使用JavaScript或jQuery！
假设你有这个CSS：
#myheader { width: 100%; } #mybody { width: 100%; } #myfooter { width: 100%; }
假设你有这个HTML：
<div id="myheader">HEADER</div> <div id="mybody">BODY</div> <div id="myfooter">FOOTER</div>
试试这个与jQuery的：
<script> $(document).ready(function() { var windowHeight = $(window).height();/* get the browser visible height on screen */ var headerHeight = $('#myheader').height();/* get the header visible height on screen */ var bodyHeight = $('#mybody').height();/* get the body visible height on screen */ var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */ var newBodyHeight = windowHeight - headerHeight - footerHeight; if(newBodyHeight > 0 && newBodyHeight > bodyHeight) { $('#mybody').height(newBodyHeight); } }); </script>
注意：我没有在这个解决scheme中使用绝对定位，因为它在移动浏览器中可能看起来很丑
这个问题是使一个div填充剩余的屏幕空间的高度的重复，正确的答案是使用flexbox模型。
所有主stream浏览器和IE11 +均支持Flexbox。 对于IE 10或更高版本，或Android 4.3及更高版本，您可以使用FlexieJS垫片。
注意标记和CSS是多么简单。 没有表黑客或任何东西。
html, body { height: 100%; margin: 0; padding: 0; /* to avoid scrollbars */ } #wrapper { display: flex; /* use the flex model */ min-height: 100%; flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */ } #header { background: yellow; height: 100px; /* can be variable as well */ } #body { flex: 1; border: 1px solid orange; } #footer{ background: lime; }
<div id="wrapper"> <div id="header">Title</div> <div id="body">Body</div> <div id="footer"> Footer<br/> of<br/> variable<br/> height<br/> </div> </div>
