如何使主要内容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: 40pxbottom: 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%; } 

http://jsfiddle.net/u91Lav16/1/

虽然这可能听起来像一个简单的问题,但实际上并不是这样!

我已经尝试了很多东西来实现你用纯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>