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

Question

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

这让我发疯了......我正在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>

Run Code Online (Sandbox Code Playgroud)

相关的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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nig*_*cat 5

也许你可以使用类似于这个页面的 CSS ,它实现了100%的高度布局？

Answer 2

Der*_*ick 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()">
...

Run Code Online (Sandbox Code Playgroud)

这将调整元素的大小,id为"main",使窗口的可见高度减去180px(180is是我标题的高度)

归档时间：	14 年，3 月前
查看次数：	6446 次
最近记录：	9 年，4 月前