Html CSS：当父级已经是 100% 时，使内部 div 的高度为 100%

CSS: Make height of an inner div 100%, when parent is already 100%

提问by user1734861

I have tried on my own for such a long time and all the posts I have read and googled so far have not helped me, so I hope one of you guys can give me a hint:

我自己尝试了这么长时间，到目前为止我阅读和搜索的所有帖子都没有帮助我，所以我希望你们中的一个人能给我一个提示：

I have a Layout consisting of a header, a footer, and a content. This layout streches over the whole page in height (which has already taken me a while to figure out). So far, so good. But now I want to stretch the content-divas far down as possible, down to the beginning of the footer. No matter what I do, it does not work, it either stays the length of the text in it, or it becomes the size of the whole window, hiding the footer and generating a scrollbar. I read about a solution making it position:absolute, but I don't want that.

我有一个由页眉、页脚和内容组成的布局。这种布局在整个页面的高度上延伸（我已经花了一段时间才弄清楚）。到现在为止还挺好。但现在我想content-div尽可能地向下拉伸，直到页脚的开头。无论我做什么，它都不起作用，它要么保持其中的文本长度，要么变成整个窗口的大小，隐藏页脚并生成滚动条。我读到了一个解决方案position:absolute，但我不想要那个。

Here is the example: http://jsfiddle.net/N9Gjf/1/

这是示例：http: //jsfiddle.net/N9Gjf/1/

You would really help me out!

你真的会帮我！

Here is the css:

这是CSS：

html, body {
    height:100%;
    text-align:center;
}

#wrapper {
    min-height:100%;
    height:100%
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue;
}   

#footer {
    background-color: silver;
    height:1.5em;
    width:800px;
    margin: -1.5em auto;
}

#header {
    background-color: orange;
    height:100px;
}

#content {
    background-color: limegreen;
}

* {
    margin:0;
    padding:0;
}

And here is the html:

这是 html：

<div id="wrapper">

    <div id="header">
        <p>Header</p>
    </div>
    <div id="content">
    INHALT  
    </div>

</div>

<div id="footer">
    <p>Footer</p>
</div>

回答by Rick Calder

http://jsfiddle.net/calder12/CprV7/

http://jsfiddle.net/calder12/CprV7/

You had a missing semi-colon after height in the wrapper. You want to set the height and min-height of the content to 100% as well.

您在包装中的高度之后缺少一个分号。您还想将内容的高度和最小高度设置为 100%。

#wrapper {
min-height:100%;
height:100%;
overflow: hidden;
width:800px;
margin: 0 auto;
text-align: left;
background-color:lightblue;
}

#content {
background-color: limegreen;
height:100%;
min-height:100%;
}

回答by Salman A

I think relative-absolute positioning is the best solution (I admit I am unable to find a way to make the heights sum up to 100%). Here is what you need to do:

我认为相对绝对定位是最好的解决方案（我承认我无法找到一种方法使高度总和达到 100%）。以下是您需要做的：

Demo #1

演示 #1

1. Make the wrapper position relative
2. Put all divs inside the wrapper
3. Use absolute positioning to position and size content and footer; use one of the following:
   1. Do not specify heightof the div; specify topand bottom
   2. Specify either topor bottombut not both; specify height

1. 使包装位置相对
2. 将所有 div 放入包装器中
3. 使用绝对定位来定位和调整内容和页脚的大小；使用以下方法之一：
   1. 不指定heightdiv；指明top及bottom
   2. 指定其中之一top或bottom但不指定两者；指定height

Alternate method is to use negative margins. This could be a brain twister but once you grasp the idea it becomes mush simpler than positioning. Here is what you need to do:

另一种方法是使用负边距。这可能是一个脑筋急转弯，但一旦你掌握了这个想法，它就会变得比定位简单。以下是您需要做的：

Demo #2

演示 #2

1. Assign heights to header and footer
2. Assign 100% height to content
3. Use negative margins on content so that (i) content pushes itself over the header (ii) pulls footer over itself
4. Use z-index positioning to bring header in "front" of content
5. Use a padding div to push the stuff inside the content div below the header

1. 为页眉和页脚指定高度
2. 为内容指定 100% 的高度
3. 在内容上使用负边距，以便 (i) 内容将自身推过页眉 (ii) 将页脚拉过自身
4. 使用 z-index 定位将标题置于内容的“前面”
5. 使用填充 div 将内容 div 内的内容推送到标题下方

回答by Sowmya

#wrapper {
    min-height:100%;
    height:100%; /*missed the semicolon here*/
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue; position:relative
}

Now it works DEMO

现在它可以运行演示

回答by Baronth

You have an error with the wrapper:

您的包装器有错误：

#wrapper {
    min-height:100%;
    height:100%;
    overflow: hidden;
    width:800px;
    margin: 0 auto;
    text-align: left;
    background-color:lightblue;
}    

You forgot to put a ;at the end of height:100%.

你忘记;在height:100%.

Try it and you will see that it will work

试试看，你会看到它会起作用