如何用css制作主要内容div填充屏幕高度[复制]-Java 学习之路

这个问题在这里已有答案：

Make a div fill the height of the remaining screen space 31个答案

所以我有一个带有 Headers ，主体和页脚的网页 . 我希望主体填充100％的页面（在页脚和页眉之间填充100％）我的页脚是绝对位置底部：0 . 每次我尝试将主体设置为100％高度或更改位置或其他东西它也将溢出 Headers . 如果使用 top: 40 将主体设置为绝对位置（因为我的 Headers 是40px高），它将向下移动40px，创建一个滚动条 .

我创建了一个简单的html文件，因为我实际上无法从实际项目中发布整个页面/ css . 使用示例代码，即使主内容体填满屏幕，它也会向下移动40px（因为我假设了 Headers ） .

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>

谁知道答案？

10 回答

1
- 不需要高度％
- 不需要jQuery
（！）使用bottom＆top拉伸div：
```
.mainbody{
       position: absolute;
       top: 40px; /* Header Height */
       bottom: 20px; /* Footer Height */
       width: 100%;
    }
```
检查我的代码：http://jsfiddle.net/aslancods/mW9WF/
回复于 2024-04-19T21:18:13+08:00

No Javascript, no absolute positioning and no fixed heights are required for this one.

这是一个所有CSS / CSS方法 doesn't require fixed heights or absolute positioning ：

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/

这种方法的好处是页脚和 Headers 可以增长以匹配其内容，并且正文将自动调整 . 您也可以选择用css限制他们的身高 .

回复于 2024-04-19T21:18:13+08:00

-7

有一个称为视口高度/视口宽度的CSS单元 .

例

.mainbody{height: 100vh;} 同样 html,body{width: 100vw;}

或90vh =视口高度的90％ .

** IE9和大多数现代浏览器 .

回复于 2024-04-19T21:18:13+08:00

这允许我的表单的最小宽度居中的内容主体不会崩溃搞笑：

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/

还有一点需要注意，如果你想要像你添加的代码一样的整个页面背景，请从包装器div中删除 height: auto !important; ：http://jsfiddle.net/mdares/a8VVw/

回复于 2024-04-19T21:18:13+08:00

使用 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

回复于 2024-04-19T21:18:13+08:00

3
不确定你到底是什么，但我想我明白了 .

Headers - 保持在屏幕顶部？页脚 - 停留在屏幕的底部？内容区域 - >适合页脚和 Headers 之间的空间？

您可以通过绝对定位或固定定位来完成此操作 .

以下是绝对定位的示例：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%; }
```
为了使其最佳工作，我建议使用％而不是像素，因为您将遇到不同屏幕/设备大小的问题 .
回复于 2024-04-19T21:18:13+08:00

105

嗯，不同的浏览器有不同的实现 .

在我看来，最简单和最优雅的解决方案是使用CSS calc（） . 不幸的是，这种方法在ie8或更低版本中不可用，并且在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);
}

我的二级解决方案涉及粘性页脚方法和盒子大小 . 这基本上允许body元素填充其父元素的100％高度，并使用 box-sizing: border-box; 包含100％的填充 . 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);
});

回复于 2024-04-19T21:18:13+08:00

56
相对值如：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/
回复于 2024-04-19T21:18:13+08:00

虽然这可能听起来像一个简单的问题，但事实并非如此！

我已经尝试了很多东西来实现你用纯CSS做的事情，而我所有的尝试都失败了 . 但是..如果你使用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>

注意：我没有在此解决方案中使用绝对定位，因为它在移动浏览器中看起来可能很难看

回复于 2024-04-19T21:18:13+08:00

此问题与Make a div fill the height of the remaining screen space重复，正确答案是使用flexbox模型 .

所有主流浏览器和IE11都支持Flexbox . 对于IE 10或更早版本，或Android 4.3及更早版本，您可以使用FlexieJS垫片 .

注意标记和CSS有多简单 . 没有 table 或任何东西 .

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

    of

    variable

    height

  </div>
</div>

在上面的CSS中，flex属性缩短flex-grow，flex-shrink和flex-basis属性以 Build 弹性项目的灵活性 . Mozilla有good introduction to the flexible boxes model .

回复于 2024-04-19T21:18:13+08:00

如何用css制作主要内容div填充屏幕高度[复制]

10 回答

相关问题