当前位置： 文江博客话题详情

div高度100%

发布于 2024-10-19 22:14:02 字数 5951 浏览 2 评论 0原文

我知道这个问题已经被问过一百万次了，但我没有太多运气让它发挥作用。我正在研究一个 Posterous 布局，我试图让我的内容流到底部。

这是到目前为止的布局的链接，

您可以看到内容保存在center_col中，所以我基本上需要此列延伸到页面/窗口的底部，无论其中有多少内容。

这是当前的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>{Title}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <style type="text/css"> 
            * {margin:0;padding:0}/* mac hide \*/
            html { height: 100%;}
            * html #wrap {height: 100%;}/* end hide */
            body {  
                background: #FFFFFF;   
                color: #fff;  
                height:100%;    
                min-width:800px;}
            #inner {
                position:relative;
                width:100%
            }
            #wrap {    
                min-height: 100%;    
                margin-left:50%;    
                position:relative;    
                background:#F9F9F9;    
                color:#000;    
                z-index:1
            } 
            #center_col {    
                float: left;    
                width: 800px;
                height: auto;
                margin-left:-380px;/* drag it central on the page*/    
                position:relative;    
                display:inline;/* ie double margin bug*/    
                background:#FFFFFF;
            }
            #sidebar {                            
                width:204px;
                height: 100%;
                padding-right:26px;     
                float:left;     
                min-height:234px;     
                position:relative;     
                background: #FFFFFF; 
            } 
            #content {                             
                width:570px;
                height: 100%;
                min-height: 100%;    
                position:relative;     
                float:left;     
                background: #F9F9F9 url('http://www.rockettree.com/images/bg-content.png') left top repeat-y;   
                padding-top:21px;     
                padding-bottom:48px; 
            }
            .postunit {                         
                width: 500px; 
                margin-left: 30px; 
                padding: 10px 5px 20px 5px;
                background: #FFFFFF;
                border: 1px solid #F9F9F9;
             }
            .sidebar {                        
                border: 1px solid #000000;
                background-color: #FFFFFF; 
                margin-top: 50px;
                padding-left: 10px;
                float: left; 
                height: auto;
                width:200px;
                -moz-border-radius: 10px;
                border-radius: 10px;
            }
            p{
                padding:5px;
                margin-bottom:1em;
            }
        </style> 
        <!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 802 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 802 ? "802" : "auto") : "802px") : "auto" );}</style><![endif]-->  
    </head> 
    <body> 
        <div id="wrap">     
            <div id="inner">        
                <div id="center_col">             
                    <div id="sidebar">                
                        <div class="header">
                            <h1>{Title}</h1>
                            <p>{Description}</p>
                        </div>
                        {block:ListSidebar}
                        <div class="profile">
                            <a href="{ProfileLink}">
                                <img src="{PortraitURL-45}" width='75' height='75'>
                            </a>
                            <p>{Profile}</p>
                        </div>
                        {/block:ListSidebar}
                    </div>
                    <div id="content">

                        <div class="posts">
                            {block:Posts}

                            <div id="postunit_{PostID}" class="postunit">
                                {block:EditBox/}

                                <div class="post">                        
                                    <h3><a class="posttitle" href="{Permalink}">{Title}</a></h3>
                                    <a class="button" href="{Permalink}">Posted {TimeAgo}</a>
                                    {Body}
                                </div>
                                {block:Responses}
                                {block:ResponsesList}
                                {/block:ResponsesList}
                                {block:Sharing}
                                {block:Tweet /}&nbsp;{block:FbLike /}
                                {/block:Sharing}
                                <div class="postresponses">
                                    <a class="button" href="#">{ResponseCount} Response{ResponseCountPluralized}</a>
                                </div>
                                {block:ResponsesShow}
                                {Responses}  
                                {ResponseForm}  
                                {/block:ResponsesShow} 
                                {/block:Responses}
                            </div>

                            {/block:Posts}
                        </div>

                        {block:Pagination/}

                    </div>         
                </div>     
            </div>
        </div> 
    </body> 
</html>
原文

I know this has been asked a million times, but I haven't had much luck making it work.I'm working on a Posterous layout, and I'm trying to get my may content to flow to the bottom.

Here is a link to the layout so far

You can see that the content is held within center_col, so I basically need this column to stretch to the bottom of the page/window regardless of how much content is in there.

Here is the current HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>{Title}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <style type="text/css"> 
            * {margin:0;padding:0}/* mac hide \*/
            html { height: 100%;}
            * html #wrap {height: 100%;}/* end hide */
            body {  
                background: #FFFFFF;   
                color: #fff;  
                height:100%;    
                min-width:800px;}
            #inner {
                position:relative;
                width:100%
            }
            #wrap {    
                min-height: 100%;    
                margin-left:50%;    
                position:relative;    
                background:#F9F9F9;    
                color:#000;    
                z-index:1
            } 
            #center_col {    
                float: left;    
                width: 800px;
                height: auto;
                margin-left:-380px;/* drag it central on the page*/    
                position:relative;    
                display:inline;/* ie double margin bug*/    
                background:#FFFFFF;
            }
            #sidebar {                            
                width:204px;
                height: 100%;
                padding-right:26px;     
                float:left;     
                min-height:234px;     
                position:relative;     
                background: #FFFFFF; 
            } 
            #content {                             
                width:570px;
                height: 100%;
                min-height: 100%;    
                position:relative;     
                float:left;     
                background: #F9F9F9 url('http://www.rockettree.com/images/bg-content.png') left top repeat-y;   
                padding-top:21px;     
                padding-bottom:48px; 
            }
            .postunit {                         
                width: 500px; 
                margin-left: 30px; 
                padding: 10px 5px 20px 5px;
                background: #FFFFFF;
                border: 1px solid #F9F9F9;
             }
            .sidebar {                        
                border: 1px solid #000000;
                background-color: #FFFFFF; 
                margin-top: 50px;
                padding-left: 10px;
                float: left; 
                height: auto;
                width:200px;
                -moz-border-radius: 10px;
                border-radius: 10px;
            }
            p{
                padding:5px;
                margin-bottom:1em;
            }
        </style> 
        <!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 802 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 802 ? "802" : "auto") : "802px") : "auto" );}</style><![endif]-->  
    </head> 
    <body> 
        <div id="wrap">     
            <div id="inner">        
                <div id="center_col">             
                    <div id="sidebar">                
                        <div class="header">
                            <h1>{Title}</h1>
                            <p>{Description}</p>
                        </div>
                        {block:ListSidebar}
                        <div class="profile">
                            <a href="{ProfileLink}">
                                <img src="{PortraitURL-45}" width='75' height='75'>
                            </a>
                            <p>{Profile}</p>
                        </div>
                        {/block:ListSidebar}
                    </div>
                    <div id="content">

                        <div class="posts">
                            {block:Posts}

                            <div id="postunit_{PostID}" class="postunit">
                                {block:EditBox/}

                                <div class="post">                        
                                    <h3><a class="posttitle" href="{Permalink}">{Title}</a></h3>
                                    <a class="button" href="{Permalink}">Posted {TimeAgo}</a>
                                    {Body}
                                </div>
                                {block:Responses}
                                {block:ResponsesList}
                                {/block:ResponsesList}
                                {block:Sharing}
                                {block:Tweet /} {block:FbLike /}
                                {/block:Sharing}
                                <div class="postresponses">
                                    <a class="button" href="#">{ResponseCount} Response{ResponseCountPluralized}</a>
                                </div>
                                {block:ResponsesShow}
                                {Responses}  
                                {ResponseForm}  
                                {/block:ResponsesShow} 
                                {/block:Responses}
                            </div>

                            {/block:Posts}
                        </div>

                        {block:Pagination/}

                    </div>         
                </div>     
            </div>
        </div> 
    </body> 
</html>

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

扫码二维码加入Web技术交流群

发布评论

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

评论（3）

少钕鈤記 2024-10-26 22:14:02

将 #center_col div 包含元素的高度设置为 100%。我测试了这个并且它有效！

Set the height of the containing elements of the #center_col div to 100%. I tested this and it worked!

回复 原文
怀中猫帐中妖 2024-10-26 22:14:02

如果您使用 jQuery：

<script type="text/javascript">
    $(function(){
        var height = $("#content").height();
        $("#sidebar").height(height); 
    });
</script>

其中 < div id =“内容”>是您想要在 << 中复制的大小的 div div id="侧边栏" >

If you are using jQuery:

<script type="text/javascript">
    $(function(){
        var height = $("#content").height();
        $("#sidebar").height(height); 
    });
</script>

where < div id="content" > is the div with the size you want to replicate in < div id="sidebar" >

回复 原文
月依秋水 2024-10-26 22:14:02

如果你的布局要保持这么简单，我说就用一个漂亮的小背景图像来伪造它 =)

如果那不行，我认为 JS 是你唯一的出路。
例如

window.addEventListener('load',fit,false);
window.addEventListener('resize',fit,false);
function fit(){
    var myHeight;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myHeight = document.body.clientHeight;
    }
    document.getElementById('content').style.height=myHeight + 'px';
}

If your layout is going to stay this simple, I say just fake it with a nice little background image =)

If that won't do, I think JS is your only way to go.
e.g.

window.addEventListener('load',fit,false);
window.addEventListener('resize',fit,false);
function fit(){
    var myHeight;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myHeight = document.body.clientHeight;
    }
    document.getElementById('content').style.height=myHeight + 'px';
}
回复 原文
~没有更多了~

关于作者

温柔一刀

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文