题 CSS高度:填充可用空间。没有固定的高度


所以我有以下结构

<div id="container">
  <div id="head"></div>
  <div id="body"></div>
  <div id="foot"></div>
</div>

我只是将id用于说明目的,所以这甚至不一定是整页。

我希望我的容器指定固定大小...或相对大小,无关紧要。让我们争论说300px的高度。也 overflow: hidden

我希望头/脚扩展以适应其内部的内容,所以 height: auto 足够了。

我希望身体扩大以适应头部和脚部之间的剩余空间。如果内容太大,则滚动(overflow: auto)。

height: 100% 上 #body 不起作用,因为它像父母一样获得300px的高度,并将自己的一部分和页脚推出父级。

有头和脚 position: absolute 不起作用,因为通过将它们从文档流程中取出,一些内容 #body 是隐藏的。要解决这个问题,我们可以使用padding-top / bottom但我们无法设置 padding-top: xxpx/padding-bottom: xxpx 在...上 #body 因为我们不知道头部/足部的必要高度,所以它们为什么 height: auto

编辑:

我试着把容器/头/身体/脚转换成一张桌子 #body 是 height: 100%。除此之外,这很有用 #body 如果内容太大,则不会滚动,而是整个表格展开以显示所有内容。这不是我需要的理想行为 #body 滚动,而不是 #content 或者是它的父母。

有什么建议么?


15
2018-06-30 21:24


起源


你想设置身体的背景以适应头部和页脚之间? - galambalazs
你可以通过将#container视为#body的背面来“伪造”你想要完成的任何东西的外观。如果#container不能被删除,你也可以抛出一个额外的父元素。完全取决于你所追求的目标。 - reisio
@reisio:不能。问题是我希望脚在底部,头部在顶部,而身体则填满空间。我不介意使用#container作为#body的背景,但问题是使头/脚位置和身体滚动。它的内容多于背景颜色。 - Dmitriy Likhten
如果我是你,我会质疑为什么我需要我的容器正好是300px高。 ;) - Evan Kroske


答案:


立即想到的唯一解决方案是显示:table-cell,尽管你遇到了ie6&ie7缺乏支持的问题。也许为优秀的浏览器提供规则,并为一些javascript计算高度差异?

编辑:

这是另一种方法 - 使用jQuery计算偏移量。请记住,这只是一个快速而肮脏的尝试 - 它需要进行浏览器测试,并且您需要一些简单的错误处理等,但它可能是一个起点。

不确定javascript是否是您想要的方式,但我看不到它是在纯CSS中完成的。

我将id更改为类,以便您可以拥有多个'fixedHeight'框:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>

$(function() {   
   $(".fixedHeight").each(function() {
    var head = $(this).find(".head");
    var body = $(this).find(".body");
    var foot = $(this).find(".foot");   
    body.css("margin-top", head.height()).css("margin-bottom", foot.height());      
   });   
 });


</script>

<style>

.head {
    background-color: red;
    position: absolute;
    top: 0;
    width:100%;
}
.body {
    background-color: blue;
    color: white;
    overflow: auto;
    position:absolute;
    top:0;
    bottom:0;
    width:100%;
    margin:2.5em 0;
}
.foot {
    background-color: green;    
    position: absolute;
    bottom: 0;
    width:100%;
}
.container {
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%;
    position: absolute;
}


</style>

</head>

<body>

<div class="container fixedHeight">
  <div class="head">
    <h1>Header Content</h1>
  </div>
  <div class="body">
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
    <p>Body Content</p>
  </div>
  <div class="foot">
    <p>Footer Content</p>
  </div>
</div>


</body>
</html>

4
2018-06-30 21:41



ie7需要支持。什么dos显示:table-cell意味着什么? table-cell是否会占用尽可能多的空间? - Dmitriy Likhten
此解决方案不起作用。为了使它正确显示我需要有一个父div display: table 然而,表似乎不尊重高度属性。所以,如果我设置表格 height 到300px它会在必要时扩展。即使 max-height 它不尊重它。我试着做头/脚 display: table-row 和身体一样 display: table-cell 和容器一样 display: table 并且它完美地工作,直到我需要身体滚动它在哪个点开始增长。 - Dmitriy Likhten
当然 - 桌子上的高度总是意味着最小高度!也许如果你为你想要做的事情提供了一些额外的背景和内容?我不确定这种精确的安排是否可以纯粹用css完成,但也许另一种方法可以解决这个问题? - DHuntrods
我正在尝试创建一个技术,以便我可以创建一些CSS类,以允许在我的页面上让我们说一个表“组件”,它显示带有标题,页脚的分页表格数据(两个中的一个将具有导航)和身体。 “组件”进入页面的某个位置,该页面包含大小,“适合”大小或“扩展”大小。长话短说,一点布局标准化,这样我就可以轻松地将一切都放在一边。不,我提到的表组件不是唯一的用例。 - Dmitriy Likhten
由于没有提出其他解决方案,我可能不得不采用这种方法。我仍然想知道为什么如果有一种css方法可以在没有多个表的情况下执行此操作。 - Dmitriy Likhten


好的,所以我接受了一些研究,以便让这种方法得以实现。

#head {
    background-color: red;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#body {
    background-color: blue;
    color: white;
    border: 0 none;
    overflow: auto;
    height: 100%;
    padding-top: 2.5em;
    padding-bottom: 2.5em;
    box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}
#foot {
    background-color: green;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
#container {
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%;
    overflow: show;
    position: absolute;
}

这假设我可以计算出的大小 #head 和 #foot 并将总大小设置为适当位置的填充 #body。由于它们的绝对定位,这将把身体的内容推出#head / #foot占据的区域。这里的问题是滚动条在顶部/底部部分被切断,因为只有内容被移动,滚动条不是。

对于宽度,这不是一个真正的问题。


4
2017-07-02 18:14





我最近遇到了这个问题,我也不知道容器的总高度(就像Dmitriy的答案所假设的那样)。让我们说高度 #head 和 #foot 分别是50和25。这是我解决它的方式:

#body {
  top: 25px;
  bottom: 50px;
  position: absolute;
}

#foot {
  position: absolute;
  bottom: 0;
}

0
2017-09-25 21:23