-1

ページの 100% の高さに div (#content) を合わせるのに苦労しています。ブラウザーのサイズを変更すると、div (.divAboutRight) はそれに応じてコンテンツを収容するために引き伸ばされますが、ラッパー div (#content) はそうではありませんか? 親が100％満たされていない場合、親（#content）の中心にある画像（#logo）があります。

本当に基本的なものが欠けていると確信しています。

任意の支援やガイダンスをいただければ幸いです。

           <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は高さ 60px#contentの div を持っているため、全高をカバーしていません。.head

.headあなたのdivをフロートさせるか、それを作ることができますposition:absolute;

.head次のように、 divの横に divを含めることもできます#content。

        <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 をサポートできない場合は、もう 1 つの方法があります。

<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 に答える