身高在鍍鉻側欄中的100％

問題是我有一個項目列表應該與側面圖像分佈在相同的高度。當我使用固定高度時，它正常工作，但是當我使用百分比時，它不起作用。

問題是，該網站是響應式的，我不能設置一個固定的高度，因爲圖像不會被修復。

的代碼如下

<!DOCTYPE html> 
<html> 
    <head> 
     <title>teste flex box</title> 
     <style> 
      html,body { 
       min-height: 100% !important; 
       height: 100%; 
      } 

      body { margin: 0 } 
      * { box-sizing: border-box } 
      .container { 
       width: 600px; 
       margin: auto; 
      } 
      .row { 
       clear: both; 
       margin: 0 -15px; 
       overflow: auto; 
      } 
      .lateral, ul { 
       width: 50%; 
       float: left; 
       padding: 0 15px; 
      } 
      img { 
       width: 100% 
      } 
      ul { 
       list-style: none; 
       margin: 0; 
       display: flex; 
       flex-direction: column; 
       justify-content: space-between; 
       height: 356px; /* works */ 
       height: 100%; /* not working */ 
      } 
      ul li { 
       height: 50px; 
       background: darkred; 
      } 
     </style> 
    </head> 
    <body> 
     <div class='container'> 
      <div class='row'> 
       <div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div> 
       <ul> 
        <li>item 1</li> 
        <li>item 2</li> 
        <li>item 3</li> 
        <li>item 4</li> 
        <li>item 5</li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

任何人都知道發生了什麼事？謝謝。

來源

2015-09-14 jairhumberto

已經嘗試設置最小高度：356px ..？ – CodeRomeos

是的，但我無法指定像素大小，因爲它可能更小。它必須獲得高度，無論圖像的大小=/ – jairhumberto

試試下面這段代碼：

<!DOCTYPE html> 
    <html> 
<head> 
    <title>teste flex box</title> 
    <style> 
     html,body { 
      min-height: 100% !important; 
      height: 100%; 
     } 

     body { margin: 0 } 
     * { box-sizing: border-box } 
     .container { 
      width: 600px; 
      margin: auto; 
      position: relative; 
     } 
     .row { 
      clear: both; 
      margin: 0 -15px; 
      overflow: auto; 
      position: relative; 
      height: auto; 
     } 
     .lateral, ul { 
      width: 50%; 
      float: left; 
      padding: 0 15px; 
     } 
     img { 
      width: 100% 
     } 
     ul { 
      list-style: none; 
      margin: 0; 
      display: flex; 
      flex-direction: column; 
      justify-content: space-between; 
      height: 100%; /* not working */ 
      position: absolute; 
      right: 0; 
     } 
     ul li { 
      background: darkred; 
     } 

     .clearfix:after { 
      clear: both; 
      content: "."; 
      display: block; 
      height: 0; 
      visibility: hidden; 
     } 
     .clearfix { 
      display: inline-block; 
     } 
     .clearfix { 
      display: block; 
     } 

    </style> 
</head> 
<body> 
<div class='container clearfix'> 
    <div class='row'> 
     <div class='lateral'><img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=285%C3%97356&w=285&h=356'></div> 
     <ul> 
      <li>item 1</li> 
      <li>item 2</li> 
      <li>item 3</li> 
      <li>item 4</li> 
      <li>item 5</li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

來源

2015-09-14 13:22:55 guvenckardas

@jairhumberto，是否有效？ – guvenckardas

我不明白你做了什麼，但完美的工作！謝謝！ – jairhumberto

Meybe它會更清楚，如果您檢查此鏈接：http://stackoverflow.com/a/3050064/2686143 – guvenckardas

身高在鍍鉻側欄中的100％

回答

相關問題