容器中有2个堆叠的div:一个缩小以适合其内容,另一个扩展以填充剩余空间

时间:2017-03-20 12:40:47

标签: html css

这是一个jsfiddle包含我正在尝试做的基本html和css。

这是我的HTML:

#mother {
  width: 100%;
  height: 100vh;
  background-color: white;
}

#header,
#footer {
  width: 100%;
  height: 20px;
  background-color: pink;
}

#title {
  width: 100%;
  background-color: grey;
}

#main {
  width: 100%;
  background-color: cyan;
}
<div id="mother">
  <div id="header">
  </div>
  <div id="title">
    Title content of indeterminate length
  </div>
  <div id="main">
    Main body content of indeterminate length
  </div>
  <div id="footer">
  </div>
</div>

我正在尝试创建一个可以填充100%窗口高度的网站,而不是更多。

布局需要包含4个部分: - 标题 - 标题 - 主要 - 页脚

页眉和页脚具有固定的高度。标题和主要内容的长度不明。

我理想的行为是标题容器缩小以适应其内容,并且主要容器要扩展以填充页脚之前的剩余可用空间。主容器内将有div,其大小必须达到其高度的100%。

使用绝对定位的元素或表是可以接受的,只要它支持IE(只需要支持最新版本,但对旧版本的支持会很惊人)。

2 个答案:

答案 0 :(得分:1)

尝试使用Flexbox。 flex:1意味着它将填充尽可能多的空间。因此,在没有flex:1的情况下保留标题可以缩小以适应其内容。

另外,请勿忘记使用浏览器支持所需的所有前缀。

http://shouldiprefix.com/

这里是jsfiddle

html, body{

  height:100%;

}

#mother {
  width: 100%;
  height: 100vh;
  background-color: white;
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  flex-direction:column;
}

#header, #footer {
  width: 100%;
  height: 20px;
  background-color: pink;
}

#title {
  width: 100%;
  background-color: grey;
}

#main {
  width: 100%;
  background-color: cyan;
  flex:1;
}

答案 1 :(得分:0)

您可以在css3中使用calc。 在main中包含title,并使用calc。

为主要内容赋予高度
    #main{
     height: calc(100% - 40px);
    }

标题和内部内容应放在主要内容中。