CSS：内容区域必须采用 100% 高度

发布于 2024-11-26 20:58:40 字数 2487 浏览 1 评论 0原文

这让我发疯...我正在 http://one29090testvdscom.accounts.combell 构建页面。净/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;
}

原文

this is driving me crazy... I'm building the page at http://one29090testvdscom.accounts.combell.net/nl. It's a page that has a header, left menu, content and footer. Width is fixed at 960px, centered horizontally. This all works. But then, if there is little text in the content, I would like that the gray content area always takes the available screen height, so that the footer is down the page.

The page looks like:

  <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>

And the relevant CSS is:

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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

末骤雨初歇 2024-12-03 20:58:40

据我所知，没有跨浏览器的方法可以单独用 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 是我的标题的高度）

I know of no cross browser way to do this in CSS alone.

I just did something similar to this last night using JS though:

<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()">
...

This will resize the Element with id "main" to be the visible height of the window less 180px (180is is the height of my header)

回复收藏 0 原文

怕倦 2024-12-03 20:58:40

也许您可以使用类似于此页面的 CSS，它实现了 100% 高度布局？

回复收藏 0 原文

等风来 2024-12-03 20:58:40

我想我找到了使用 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 解决方案，所以如果有人想出一个好主意，请分享:)

I think I found a workaround using jquery. I added the following script to the masterpage:

    <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>

So after each page load, it gets the height of the original height of the content area. Then it resizes it according to the window height, so that when the content height is smaller than the window height, it resizes to take the window height (minus header and footer heights). If the browser window then is resized, it does exactly the same (using the original content height, not the current!).

Of course, I would have preferred a CSS solution, so if anyone comes up with a bright idea, share it :)

回复收藏 0 原文