Question

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

页面如下：

  <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

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

Answer 2

我知道没有跨浏览器方式在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 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

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

Answer 5

您可以将容器的最小高度设置为100％，但您还必须将父容器设置为最小高度100％，否则它将无法工作。对于不太现代的浏览器，有时需要将主体甚至html标签设置为高度100％（而不是最小高度！）。

Answer 6

将高度：100％放在容器上？

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

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

6 个答案: