CSS：内容区域必须占据 100% 的高度

Question

这快把我逼疯了……我正在http://one29090testvdscom.accounts.combell.net/nl 建立页面。这是一个包含页眉、左侧菜单、内容和页脚的页面。宽度固定为 960 像素，水平居中。这一切都有效。但是，如果内容中的文字很少，我希望灰色内容区域始终采用可用的屏幕高度，以便页脚在页面下方。

页面如下：

  <body>

    <!-- Centered container that contains site -->
    <div id="centeredcontainer">            
        <!-- Area with header -->
        <div id="header">                
            header here                              
        </div>            
        <!-- Area that contains main menu on the left and content on the right -->
        <div id="mainmenuandcontent">
            <!-- Main menu on the left -->
            <div id="mainmenu">
                main menu here                   
            </div>
            <!-- Content on the right -->   
            <div id="content">
                 body here
            </div>                
            <!-- Clears the floats so that next elements can use margins normally -->
            <div class="clearer"></div>
            <!-- Red line under content -->
            <div id="RedLineUnderContent"></div>
        </div>                         
        <!-- Area with languages -->
        <div id="languages">
          footer here           
        </div>                       
    </div>            
</body>

相关的CSS是：

body
{
    font-size: 12px;
    font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif; 
    line-height:1.5em;      
    margin: 0; 
    padding: 0;   
    background-color: Black;
}

#centeredcontainer  
{
    width: 960px;    
    margin-left: auto ;
    margin-right: auto ;
}

#header
{
    margin-bottom: 20px; 
    margin-top:20px;  
}

#mainmenuandcontent
{  
    width: 960px;
    clear: both;       
    position: relative;    
}

#mainmenu
{        
    float: left;   
    width:180px; 
    padding:10px;
}

#content
{
    float: left;
    background-color: #403F3F;        
    width: 760px; 
    min-height: 400px;
    color:White;
}

#RedLineUnderContent
{
    height: 20px;
    background: #A10C10;
    margin-left: 200px; 
}

#languages
{        
    margin-top: 10px;   
    margin-left: 200px; 
    margin-bottom:20px;  
    text-transform:uppercase;  
}

.clearer
{
    clear:both;
}

Answer 1

在容器上放置一个高度：100%？

2016 年更新：使用视口相关单位而不是百分比或像素，例如width: 100wv; height: 100wh;。该单位代表浏览器窗口大小的百分比，因此忽略任何父元素大小。

Answer 2

您不需要 JavaScript。请参阅my answer for a related question, "Set div to remaining height using CSS with unknown height divs above and below"。内容将扩展以填满可用区域。

Answer 3

我想我找到了使用 jquery 的解决方法。我在母版页中添加了以下脚本：

    <script type="text/javascript">
        var contentHeight;
        $(document).ready(function () {
            contentHeight = $('#content').height();
            Resize();
            $(window).resize(function () {
                Resize();
            });
        });                    
        function Resize() {
            currentWindowHeight = $(document).height();                                
            if (contentHeight < currentWindowHeight - 160) {
                $('#content').css('height', (currentWindowHeight - 160) + "px");   
            }                               
        }
    </script>

所以每次页面加载后，它都会获取内容区域原始高度的高度。然后它根据窗口高度调整它的大小，以便当内容高度小于窗口高度时，它调整大小以获取窗口高度（减去页眉和页脚高度）。如果随后调整浏览器窗口的大小，它的效果完全相同（使用原始内容高度，而不是当前高度！）。

当然，我更喜欢 CSS 解决方案，所以如果有人想出一个好主意，请分享 :)

Answer 4

您可以将容器的最小高度设置为 100%，但您还必须将父容器的最小高度设置为 100%，否则将不起作用。 对于不太现代的浏览器，有时需要将 body 甚至 html 标签设置为 100% 的高度（不是最小高度！）。

Answer 5

我知道没有跨浏览器的方式可以单独在 CSS 中执行此操作。

我昨晚使用 JS 做了类似的事情：

<head>
   ....
    <script type="text/javascript">
        function resize() {
            var frame = document.getElementById("main");
            var windowheight = window.innerHeight;
            document.body.style.height = windowheight + "px";
            frame.style.height = windowheight - 180 + "px";
        }
     </script> 
</head>
<body onload="resize()" onresize="resize()">
...

这会将 id 为“main”的元素的大小调整为窗口的可见高度减去 180px（180is 是我的标题的高度）

Answer 6

也许你可以使用类似于this page, which achieves a 100% height layout的CSS？