CSS，拉伸垂直div，直到它达到其父的高度 [英] CSS, Stretching vertically div until it reach the height of its parent

问题描述

包装在 pageWrapper 容器中，我在一列中有3个div。第一（标题）和最后（navWrapper）有固定的高度。我需要中间的一个（ contentWrapper ）在高度上展开，直到父div pageWrapper达到最大高度（根据浏览器的视口 ）

我绘制这个问题的模式。

这里是我目前解决方案的小提琴。
http://jsfiddle.net/ xp6tG /

这里是代码

CSS和HTML

  html，body {height：100％;} body {background-color：＃E3E3E3;}＃pageWrapper {margin：0 auto;位置：相对; width：600px; height：100％;} header {display：block;宽度：100％; height：100px; background：yellow;}＃contentWrapper {width：100％;高度：100％; background：blue;}＃navWrapper {width：100％;} height：100px; background：green;}  

 < div id =pageWrapper > < header>标题< / header> < div id =contentWrapper>内容< / div> < div id =navWrapper> Nav< / div>< / div>  

解决方案

这里有一种方法可以做

。

  html，body {height：100％; margin：0;} 
 body {background-color：＃e3e3e3;} 
 
 #pagewrapper {
 margin：0 auto; 
 position：relative; 
 width：600px; 
 height：100％; 
} 
 header {
 display：block; 
 width：100％; 
 height：100px; 
 background：yellow; 
} 
 #contentwrapper {
 width：100％; 
 position：absolute; 
 top：100px; 
 bottom：100px; 
 left：0; 
 background：blue; 
} 
 #navwrapper {
 width：100％; 
 position：absolute; 
 height：100px; 
 bottom：0px; 
 left：0; 
 background：green; 
} 
  

由于您指定标头的高度和 #navwrapper 块元素，
你可以使用绝对定位相对于父 #pagewrapper block
设置 #contentwrapper 的底部和顶部偏移量，以及
#navwrapper 。

如果您看到一个滚动条，您可能需要设置 margin：0 html 和/或正文标签。

演示fiddle： http://jsfiddle.net/audetwebdesign/yUs6r/

Wrapped in a pageWrapper container, I have 3 divs in a column. First (header) and last (navWrapper) have fixed heights. I need the middle one (contentWrapper) to stretch in height until the parent div pageWrapper reaches the maximum height (according to the browser's viewport).

I draw the schema of this problem.

Here is a fiddle of my current solution. http://jsfiddle.net/xp6tG/

and here the code

CSS and HTML

html, body{
  height: 100%;
}

body{
  background-color: #E3E3E3;
}

#pageWrapper{
  margin: 0 auto;
  position: relative;
  width: 600px;
  height: 100%;
}

header{ 
  display:block;
  width: 100%;
  height: 100px;
  background: yellow;
}

#contentWrapper{
  width: 100%;
  height: 100%;
  background: blue;
}

#navWrapper{
  width: 100%;
  height: 100px;
  background: green;
}

<div id="pageWrapper">
  <header>
    Header
  </header>
  <div id="contentWrapper">
    Content
  </div>
  <div id="navWrapper">
    Nav
  </div>
</div>

It is almost working, but it results in too high height, which causes that a vertical scrollbar appears.

解决方案

Here is one way of doing it.

Apply the following CSS:

html, body{ height: 100%; margin: 0;}
body{ background-color: #e3e3e3;}

#pagewrapper{
    margin: 0 auto;
    position: relative;
    width: 600px;
    height: 100%;
}
header{ 
    display:block;
    width: 100%;
    height: 100px;
    background: yellow;
}
#contentwrapper{
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    background: blue;
}
#navwrapper{
    width: 100%;
    position: absolute;
    height: 100px;
    bottom: 0px;
    left: 0;
    background: green;
}

Since you specified heights for the header and #navwrapper block elements, you can use absolute positioning with respect to the parent #pagewrapper block to set the bottom and top offsets for #contentwrapper and the bottom offset for #navwrapper.

If you see a scroll bar, you may need to set margin: 0 for either the html and/or body tags.

Demo fiddle: http://jsfiddle.net/audetwebdesign/yUs6r/

这篇关于CSS，拉伸垂直div，直到它达到其父的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！