-1

我正在努力让我的 div (#content) 达到页面的 100% 高度，如果我调整浏览器的大小，我的 div (.divAboutRight) 会相应地拉伸以适应内容，但我的包装器 div (#content) 没有？我有一个图像（#logo），它以它的父级（#content）为中心，当父级没有填充 100% 时它不会这样做。

我确定我错过了一些非常基本的东西。

任何帮助或指导将不胜感激。

           <style>
            html{margin:0; padding:0; width:100%; height:100%;}
            body{height:100%;min-height:100%; margin:0; padding:0; width:100%; background-color:#fb9f32; color:#FFF;}

            .head{width:100%; height:60px; background-color:#FFFFFF;}
            #content{width:100%;height:100%;min-height: 100%; position:relative; border:1px solid red;}
            #Back
            {
                position:absolute;
                left:0;
                background:url(../images/Back.png) no-repeat;
                background-size: 100% 100%;
                float:left;
                min-width:55%;
                height:59%;
                border:1px solid green;
            }
            #logo
            {
                display:block;
                position: absolute;
                top: 50%;
                left: 50%;
                max-height: 132px;
                max-width: 133px;
                margin: -66.5px 0 0 -66px;
                z-index:9999999;
            }
            .divAboutRight{width:35%; margin-right:5%; margin-top:3%;float:right; border:1px solid yellow;}

            </style>

            <body>
            <div class="head">
                <!-- Header Content -->
            </div>

            <div id="content">
                    <div id="Back">
                        <!-- absolute positioned -->
                   </div>

                <!-- Fixed logo to be center of content wrapper -->
                <img id="logo" width="133" height="132" src="images/logo.png"/>

                <div class="divAboutRight">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et volutpat metus. Cras et ante in enim sollicitudin facilisis quis eget lacus. Donec a justo in lacus ornare porttitor feugiat sit amet velit. Nunc iaculis, tellus quis sollicitudin placerat, leo nulla viverra lectus, id semper massa arcu in purus. Vivamus dictum venenatis metus quis viverra. Donec euismod, mauris vel aliquam convallis, lectus diam scelerisque lacus, id adipiscing orci augue nec arcu. Nulla molestie est lobortis tempor consectetur. Curabitur convallis malesuada velit et volutpat. Morbi a commodo velit. Integer malesuada nunc augue, ac convallis justo sollicitudin a. Nam nulla urna, facilisis quis ullamcorper dictum, venenatis eu ante. Ut consectetur sit amet lacus sed posuere. Nunc facilisis est eu ultrices scelerisque.

            Cras feugiat tincidunt justo, et eleifend felis pretium ac. Nulla ornare, massa eu tincidunt tristique, sapien enim congue nisl, id pellentesque nisl lorem vel dolor. Mauris imperdiet, diam ac aliquam convallis, eros ante rhoncus justo, non malesuada mi nulla non sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent sapien velit, sodales eget odio at, ullamcorper molestie nibh. Mauris iaculis posuere leo, non sollicitudin libero ullamcorper quis. Integer lobortis et eros vitae imperdiet. Ut ligula sem, tempor quis lobortis imperdiet, interdum ac nisl. Sed non lectus mauris.

            Donec mattis lorem dolor, a feugiat neque dictum in. Nullam pharetra magna mi, quis hendrerit odio vestibulum id. Donec faucibus risus sed felis mattis pharetra vel a enim. Curabitur ultrices bibendum dapibus. Nulla sit amet metus mauris. Phasellus at tellus est. Mauris sagittis, eros quis laoreet sodales, tortor justo tempus dolor, et tincidunt dui tellus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae pulvinar sapien. Praesent pellentesque metus sem, pellentesque ullamcorper augue pellentesque eu.

            In neque lectus, ultricies ultrices nisi sed, commodo viverra justo. Cras quis neque vulputate, elementum ante non, pellentesque urna. Fusce id tempus magna. Fusce nec tortor id nulla pharetra sodales nec at tellus. Suspendisse gravida felis non turpis consequat, sit amet gravida risus ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elementum consequat mauris ut accumsan. Donec nec aliquet tortor. Donec turpis tellus, convallis at faucibus sed, volutpat ac turpis. Vestibulum consequat sapien mi, et ultricies libero convallis ultricies. Mauris placerat mollis elementum. Nulla molestie felis purus, sed hendrerit enim vehicula ac. Curabitur adipiscing fringilla ultricies. Nunc hendrerit libero non aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis dui a enim interdum aliquet.

            Nulla sagittis ligula enim, in vulputate lectus tincidunt ac. Sed imperdiet gravida orci at semper. Proin mollis adipiscing neque, vitae convallis risus rutrum eget. Praesent augue neque, lacinia nec tincidunt sed, elementum non sem. Suspendisse a mi condimentum, pellentesque lorem id, tempor turpis. In tortor nibh, convallis egestas ornare scelerisque, semper non nisi. Pellentesque ullamcorper euismod malesuada. Curabitur condimentum arcu id lorem posuere tincidunt. Proin convallis, elit vel fringilla tincidunt, eros diam ullamcorper lacus, eget posuere tortor velit vestibulum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet pellentesque lacus. Maecenas molestie augue id ipsum feugiat, non pulvinar mi eleifend. Aenean augue metus, tincidunt non pellentesque eu, tristique quis metus. In a neque viverra, commodo velit ut, pretium diam.
                </div>


            </div>
            </body>
4

2 回答 2

1

据我所知，您的 div#content没有覆盖整个高度，因为您有.head一个高度为 60px 的 div；

哟可以浮动您的.headdiv 或使其成为position:absolute；

您还可以像这样在.headdiv 旁边包含#contentdiv：

        <body>
        <div id="content">

            <div class="head">
                <!-- Header Content -->
            </div>

                <div id="Back">
                    <!-- absolute positioned -->
               </div>

            <!-- Fixed logo to be center of content wrapper -->
            <img id="logo" width="133" height="132" src="images/logo.png"/>

            <div class="divAboutRight">
                    <!-- Dynamic Content -->
            </div>


        </div>
        </body>
于 2013-10-21T17:45:46.167 回答
1

如果您可以支持 IE9+，代码如下：

<style>
    #content{
        .
        .
        height:calc(100% - 60px);
        .
    }
</style>

现在所有现代浏览器都支持Calc 。

另一方面，如果你不能支持 calc，这里还有一种方法：

<style>
  .head {
    ... // rest of head's css
    z-index: 2;
  }
  #content {
    position: relative;
    box-sizing('border-box');
    height: 100%;
    padding-top: 60px;   // height equal to the header
    margin-top: -60px; // this will offset your content up again
    z-index: 1;  // make the content go BEHIND the head
    ... // rest of the CSS
 }
</style>

注意：这将使滚动条从后面开始head，因为内容将在头部下方。

于 2013-10-21T17:52:40.243 回答