怎麼給一個div一個負責任的高度

我指出來學習響應式設計，但有一件事我似乎無法弄清楚，那麼遠，怎麼給一個div一個負責任的高度

這裏有一個工作示例：http://ericbrockmanwebsites.com/dev1/

我想要div元素（contactBg）裏面的文本下降到左邊的圖像的底部。顯然，我可以通過在px中定義高度來實現這一點，但是當窗口的其餘部分調整大小而不是流暢時，該高度會保持不變。

如果有任何優秀的文章你可能知道這解釋瞭如何做到這一點，這將是非常有益的，謝謝！

這裏的標記：

<div class="row-fluid"> 
     <div class="span10 offset1"> 
      <div class="container-fluid"> 
       <div class="row-fluid"> 
        <div class="span5"> 
         <img src="images/logo.jpg" alt="logo" /> 
         <img src="images/store.jpg" alt="store" /> 
        </div><!-- /span5 --> 
        <div class="span7"> 
         <img src="images/portal.jpg" alt="portal"> 
         <div class="contactBg"> 
          Administration: Emma Jane Julien<br /> 
          <a href="mailto:[email protected]">[email protected]</a> 
         </div><!-- /contactBg --> 
        </div><!-- /span7 --> 
       </div><!-- /row-fluid --> 
      </div><!-- /container-fluid --> 
     </div><!-- /span10 offset1 --> 
    </div> <!-- /row-fluid -->

而這裏的CSS：

body { 
     background: url(../images/3D2A1698A177AF9B71_218.png) repeat; 
    } 

    img { 
     max-width:100%; 
     padding-bottom:1%; 
    } 

    .container-fluid { 
     background:#fff; 
     padding: 1%; 
    } 

     .row-fluid { 
     width: 100%; 
     *zoom: 1; 
} 
     .row-fluid [class*="span"] { 
     display: block; 
     float: left; 
     width: 100%; 
     min-height: 30px; 
     margin-left: 1%; 
     *margin-left: 2.709239449864817%; 
     -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
       box-sizing: border-box; 
} 

     .row-fluid .span10 { 
     width: 82.87292817679558%; 
     *width: 82.81973668743387%; 
     } 

     .row-fluid .span7 { 
     width: 58.06353591160195%; 
     *width: 57.12912895262725%; 
     } 

     .row-fluid .span5 { 
     width: 40.93646408839753%; 
     *width: 40.00205712942283%; 
     } 
     .row-fluid .span4 { 
     width: 31.491712707182323%; 
     *width: 31.43852121782062%; 
     } 

    .contactBg { 
     background: #282624; 
     padding: 3%; 
     max-width:100%; 
     height:auto; 
    }

來源

2013-02-05 Eric Brockman

約百分比定義字體大小是什麼？ – kleinfreund

@kleinfreund哦，這很聰明。我會嘗試一下，讓你知道！ –

@ kleinfreund實際上不能很好的工作，因爲％/ em參考了默認的字體大小，而不是它所在的區域，我認爲... –

我知道這是遲到了一點點，但你可以使用視窗單位

從caniuse.com：

視口單位：大衆，VH，VMIN，VMAX - 代表1 CR 長度單位視口寬度（vw），高度（vh），兩者中較小者（vmin）或兩者中較大者（vmax）的視口大小的百分比。

支持：http://caniuse.com/#feat=viewport-units

div { 
 
/* 25% of viewport */ 
 
    height: 25vh; 
 
    width: 15rem; 
 
    background-color: #222; 
 
    color: #eee; 
 
    font-family: monospace; 
 
    padding: 2rem; 
 
}

<div>responsive height</div>

來源

2017-04-05 22:33:16 naeluh

乾淨利落的例子！ – felansu

對於div的高度響應，它必須是一個父元素裏面有一個定義的高度從中推導出它的相對高度。

如果您在右側設置容納圖片和文本框的容器的高度，隨後可以將其兩個孩子的高度設置爲75％和25％。

但是，當網站佈局變得狹窄而且事情會變得糟糕時，這會變得有點棘手。嘗試將.contentBg上的填充設置爲5.5％。

我的建議是使用媒體查詢來調整不同屏幕尺寸的填充，然後在適當的時候將所有內容合併到一個列中。

來源

2013-02-05 20:31:21

謝謝@Lazaro！ –

這越來越接近了，但仍然存在着由px定義父元素高度的問題，正如您可以在示例站點上看到的那樣：http：// ericbrockmanwebsites。com/dev1 /現在當頁面的其他部分調整大小時，該元素（顯然）會保持它的大小。 –

我不認爲這是最好的解決方案，但它似乎工作。我不是使用背景顏色，而是嵌入背景圖像，相對放置圖像，然後將文本包裹在子元素中，並將其放置在絕對位置 - 居中。

來源

2013-02-05 22:15:18

怎麼給一個div一個負責任的高度

回答

相關問題