Setting div hight respective of screen height via

2019-08-16 09:33发布

站内问答 / jQuery
1293 1 4

I have been told to use JS to resolve my issue:

My issue is that I have 2 divs content and sidebar with the height set to 100%, I have a footer located underneath.

My issue is that on my laptop I would like the page to show without a scroll and on a full page3, if there is more data the page will then require a scroll.

How could I set the div height determined to my screen resolution?

1条回答
祖国的老花朵
2楼-- · 2019-08-16 09:52

You can do this in pure HTML/CSS - no JavaScript required.

What you're after is a cross-browser sticky footer.

The following is derived from http://www.cssstickyfooter.com/:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                padding: 0;
            }

            #wrap {
                min-height: 100%;
            }

            #main {
                overflow:auto;
                padding-bottom: 150px; /* must be same height as the footer */
            }

            #footer {
                position: relative;
                margin-top: -150px; /* negative value of footer height */
                height: 150px;
                clear:both;
            } 

            /*Opera Fix*/
            body:before {
                content:"";
                height:100%;
                float:left;
                width:0;
                margin-top:-32767px;/
            }
        </style>
        <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="wrap">
            <div id="main">
                <div id="content">
                    <!-- Main content here -->
                </div>
            </div>
        </div>
        <div id="footer">
            <!-- Footer content here -->
        </div>
    </body>
</html>

You can see a working example here: http://jsfiddle.net/dZDUR/

Resize the right-hand "Result" pane to be shorter/taller than the text to see the scroll bar appear / disappear.

As per the CSS Sticky Footer how-to, you can insert your normal 'column' layout inside the main div.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)