css

css - 滚动条后拉伸(stretch)布局高度 100%

转载作者：太空宇宙更新时间：2023-11-04 04:38:27

我有一个三列、固定的页眉/页脚和三列内容布局，当中间 DIV 溢出时，左右 DIV 不会拉伸(stretch)到 100% 高度。

有什么建议吗？另外，您认为布局 CSS 及其跨浏览器兼容性和整体 CSS 使用情况如何？

干杯，大卫

jsFiddle:http://jsfiddle.net/VsTYJ/1/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Sample Page</title>
        <style type="text/css">
            html 
            {
                height: 100%;
            }
            body 
            {
                margin: 0;
                padding: 0;
                height: 100%;
            } 
            #container-main
            {      
                background: #888888;   
                margin: 0;
                padding: 0;
                font: 1.5em "Trebuchet MS", Helvetica, sans-serif;    
                height: 100%;               
                min-height: 100%;
                min-width: 768px;
            }    
            #container-left, #container-middle, #container-right
            {            
                float: left;
                margin: 0;
                padding: 0;                  
                min-height: 100%;
            }  
            #container-left
            {            
                background: #777777;
                width: 25%;
            } 
            #container-middle
            {            
                background: #999999;
                width: 60%;
            } 
            #container-right
            {            
                background: #777777;
                width: 15%;
            } 
            #container-header 
            { 
                background: #eee; 
                border: 0px solid #666; 
                height: 60px; 
                left: 0; 
                position: fixed; 
                width: 100%; 
                top: 0;  
                padding: 0;                      
            }
            #header-left, #header-middle, #header-right 
            { 
                text-align: center;
                line-height: 60px; 
                margin: 0; 
                padding: 0;
                float: left;                         
            }  
            #header-left
            {  
                background: #999999;
                width: 25%;             
            }  
            #header-middle
            {  
                background: #888888;
                width: 60%;             
            } 
            #header-right
            {  
                background: #999999;
                width: 15%;             
            }                              
            #container-content 
            { 
                margin: 0; 
                overflow: auto; 
                padding: 50px 0 50px 0; 
                width: 100%; 
            }
            #content
            {
            }
            #container-footer 
            { 
                background:#eee; 
                border: 0px solid #666; 
                bottom:0; 
                height:60px; 
                left:0; 
                position:fixed; 
                width:100%; 
            }
            #footer-left, #footer-middle, #footer-right 
            { 
                text-align: center;
                line-height: 60px; 
                margin: 0; 
                float: left;                         
            }  
            #footer-left
            {  
                background: #999999;
                width: 25%;             
            }  
            #footer-middle
            {  
                background: #888888;
                width: 60%;             
            } 
            #footer-right
            {  
                background: #999999;
                width: 15%;             
            }                                                              
        </style>
    </head>
    <body>
        <div id="container-main">
            <div id="container-left">            
                Content 1
            </div>
            <div id="container-middle">
                <div id="container-header">
                    <div id="header-left">
                        Header Left
                    </div>
                    <div id="header-middle">
                        Header Middle
                    </div>
                    <div id="header-right">
                        Header Right
                    </div>
                </div>
                <div id="container-content">
                    <div id="content">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                        </p>
                    </div>
                </div>
                <div id="container-footer">
                    <div id="footer-left">
                        Footer Left
                    </div>
                    <div id="footer-middle">
                        Footer Middle
                    </div>
                    <div id="footer-right">
                        Footer Right
                    </div>
                </div>
            </div>
            <div id="container-right">
                Content 3
            </div>
        </div>
    </body>
    </html>

最佳答案

试试这个

在这里 fiddle :- http://jsfiddle.net/z837M/

我所做的更改是不使用背景包裹内容，您可以使用 background-size 如果您打算稍后放置任何图像，您可以使用 100% 或 cover 作为其值。使位置固定和 Z-Index :-1

#container-main
            {      
                background: #888888;   
                -webkit-background-size: 100%;
                -moz-background-size: 100%;
                -o-background-size: 100%;
                background-size: 100%;
                margin: 0;
                padding: 0;
                font: 1.5em "Trebuchet MS", Helvetica, sans-serif;    
                height: auto;               
                min-height: 100%;
                min-width: 100%;
               position:fixed;
               z-index:-1;
            }

HTML

  <div id="container-left">            
        Content 1
    </div>
    <div id="container-middle">
        <div id="container-header">
            <div id="header-left">
                Header Left
            </div>
            <div id="header-middle">
                Header Middle
            </div>
            <div id="header-right">
                Header Right
            </div>
        </div>
        <div id="container-content">
            <div id="content">

                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.                    
                </p>

            </div>
        </div>
        <div id="container-footer">
            <div id="footer-left">
                Footer Left
            </div>
            <div id="footer-middle">
                Footer Middle
            </div>
            <div id="footer-right">
                Footer Right
            </div>
        </div>
    </div>
    <div id="container-right">
        Content 3
    </div>

更新

使用表格显示让列占据全高。由于您有一些固定元素，因此它们所在的位置并不重要。 Fiddle

CSS

    div.column {
        display:table-cell;
    }
    div.section {
        display:table-row;
    }

HTML

  <div id="container-wrapper" class="section">
        <div id="container-left" class="column">
            <div class="container-content">Content 1</div>
        </div>
        <div id="container-middle" class="column">
            <div class="container-content">
                <div id="content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>
            </div>
        </div>
        <div id="container-right" class="column">Content 3</div>
    </div>

关于css - 滚动条后拉伸(stretch)布局高度 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15934738/

文章推荐： html - 对齐

列表中的文本

文章推荐： c - 为什么会出现segmentation Fault错误

文章推荐： c - 如何减少从 sem_wait 唤醒后的上下文切换时间

文章推荐： linux - 如何存储 ls 的值grep 测试 |变量中的 wc -l

android - sw320dp 布局 block xlarge 布局
我为 S3 做了一个额外的布局(所有布局的反叛)，人们说，使用 layout-sw320dp 对 s3 有好处。一切正常，s3 选择了这个文件夹，布局在 s3 上看起来很棒。但是当我尝试在 10"平
html - 未对齐的 CSS 布局 - 具有固定中心的 3 col 布局
我是 CSS 的新手，我正在尝试创建一个 3 列布局。也应该有一个居中的页脚。页面的总高度应该填满当前的屏幕。宽度似乎不对。目前，页脚在尺寸和位置上似乎都没有对齐。 I have attached
Java游戏-布局
已关闭。这个问题是 off-topic 。目前不接受答案。想要改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。已关闭10 年前。 Improve th
android确定设备是否为从右到左的语言/布局
有没有办法确定设备是从右到左的语言(比如阿拉伯语)而不是从左到右的语言(英语)？需要与旧 API 级别(低至 10)兼容的东西解决方案我最终在接受的答案中使用了 xml 方法。更进一步，我还添加
QT 布局 - 初始方向
我是 QT 的新手。我试图通过实现下面看到的这个小窗口来理解布局机制。它在作为主窗口的 QWidget 下具有以下元素: 一个延伸到所有客户区域的大型 QWidget。窗口顶部的两个 QWidget
Extjs Accordion 布局
Accordion 布局是堆叠面板布局，因为此时只有一个面板可见，但我想同时显示两个面板可见，所以我们可以使用 Accordion 面板来做到这一点吗？？最佳答案您不能扩展现有的 Accordio
sql - 简单的数据库表设计/布局
我只是想知道，作为一个假设示例，针对以下场景布局表格的最佳方式是什么: 假设我正在编写一个用于跟踪学生出勤的应用程序。每年年初，我都想添加所有学生(我将手动执行此操作 - 现在，是否应该为这里的每个学
SVN 布局——最佳实践
在 CVS 中，我们的项目中有多个目录。有一个夜间构建，它必须从同一个 CVS 项目的不同目录中提取东西才能构建夜间构建。所以我应该记住这一点，如果我们迁移到 SVN，我必须修改构建脚本以从不同的存
窗口上的 WPF 布局
我在 WPF Windows 上有几个列表框，带有 Height="Auto" Width="Auto"在表格上设置表单大小在不同分辨率下完美匹配，但问题是当我按下最大化按钮时，在表单调整大小时会看
WPF 布局，我可以清理它吗？
仅供引用，我是 WPF 的新手。我正在我的 WPF 应用程序中创建一个侧边栏并想要圆角。我学到的不是可以附加到网格的属性。另外，我尝试将文本块放在边框控件中，但我收到的错误消息说“ child 只能
codeigniter - 如何使用基本设计样式创建母版页(布局)
我是CodeIgniter的新手。我想使用包含菜单，页脚等的基本样式创建母版页或布局。我不想在所有页面中编写重复的内容并为所有页面自动加载。例如，我可以在asp.net中创建母版页，或者在asp.ne
一个窗口的 eclipse 布局
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值，如图- 但是，当我显示表达式时，我得到这样的布局 - 我的问题是，是否可以更改变量窗口的布局也可以在右侧显示值，因为这对我来说很
Magento XML 布局
上面的代码中，放置“as=”footer_links”是什么意思？最佳答案 as="x" 语法定义模板可用来调用 block 的名称。因此，对于以下内容: 在outer_block.p
c++ - RegGetValueA格式/布局
我试图编写一个检查注册表值的功能，以查看Windows上的控制台是否启用了颜色。 Computer\HKEY_CURRENT_USER\Console\VirtualTerminalLevel 如果您
动态添加区域到 Marionette 布局
我有一个布局，但无法提前定义其所有区域，因为它们是未知的。稍后创建了 ItemView，我想使用 View 的 ID 作为区域名称在布局中创建一个新区域，这样我就可以说: layout.dynami
以多列和行作为启动任务的 ConEmu 布局
我们有一个相当复杂的 gulp 构建过程，涉及多个模块，每个模块都有一个或两个 watch 。我想在一个仪表板中监控这一点，如下所示: 每一列都是一个模块，列内的每一行都是后续的构建步骤。一旦第 1
Java JFrame 布局
这就是问题所在，我有一个 MainWindow 类，它在一个设置例程中扩展了 JFrame，我将该类的布局设置为新的 CardLayout()。这一切都工作正常，但是当我从 JFrame 请求布局并将
Java JFrame 布局
我正在制作一个简单的迷宫程序，用户可以在其中创建墙壁、路径、起点和终点，单击“解决”，迷宫将被解决。为此，我有一个大小为 640x480 的 java JFrame。在 JFrame 的左侧，我有一个
一个窗口的 eclipse 布局
我正在使用它来调试应用程序。调试的时候发现底部显示了一个窗口中变量的值，如图- 但是，当我显示表达式时，我得到这样的布局 - 我的问题是，是否可以更改变量窗口的布局也可以在右侧显示值，因为这对我来说很
JavaFX VBox 布局
我已经编写了使用 VBox 作为布局的代码。我希望按钮出现在顶行，然后绘制 2 条水平线，在 400x400 场景中应位于 y=200 和 300 处。但输出显示了我给出的不同坐标处的线条。我知道这

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 滚动条后拉伸(stretch)布局高度 100%

CSS

HTML

更新

CSS

HTML