內容包裝，以填補

-1

頁

我努力讓我的股利（＃內容）到頁面的完整100％的高度，如果我調整我的瀏覽器的100％的高度，我的DIV（.divAboutRight）相應延伸以容納這些內容但我的包裝div（＃內容）不？我有一個圖像（#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>

來源

2013-10-21 user1475479

似乎在這裏採取'100％' - 注意我把邊界增加到了10px .. http://jsfiddle.net/ePsYN/ –

謝謝@JoshC，它的確如此，但是如果你把很多內容放在（.divAboutRight）把它分成（#conten）div。或模擬擠壓瀏覽器寬度。 – user1475479

你打算支持哪些瀏覽器？的 –

從我所看到的，你的DIV #content沒有覆蓋全高，因爲你有一個div .head與60像素的高度;

呦可以浮動你.head格或使它的position:absolute;

你也可以包括.head DIV iside的#content DIV這樣的：

 <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-21 17:45:46

感謝@Bogdan科斯泰亞內容重疊我想這可能是也，我想你的解決方案，但仍相同的結果 – user1475479

如果你都OK支持IE9 +，這裏是代碼：

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

Calc是在所有的現代supported瀏覽器。

在另一方面，如果你不能支持計算，這裏是另一種方式：

<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-21 17:52:40

謝謝我試過你的解決方案。即使我省略了頭部，我仍然可以得到相同的結果 – user1475479

你能演一個小提琴並演示你的問題嗎？ –

嗨@哈爾什在這裏是一個修改與顯示重疊http://jsfiddle.net/ePsYN/1/.Thanks內容的小提琴 – user1475479

內容包裝，以填補

回答

相關問題