填充剩下的高度相對DIV

-2

div.main = encloses two child div 
div.head = uses about 10%~20% of div.main height 
div.body = uses about 80%~90% of div.main height

我想div.body填補分配div.head的高度後留下的剩餘高度空間。

我想盡可能地用position: relative;來做到這一點。

我使用百分比值的高度和寬度，而不是像素，因爲屏幕分辨率可能會有所不同。我希望它根據誰可能看到它的屏幕分辨率自動調整大小。

我注意到，如果我使用像素值的作品，但不是百分比。

來源

2015-09-10 TheBigBoss

提供編碼？你有什麼嘗試？鏈接到JSFiddle？ – Aakash

在下面的代碼我已經創建了一個主DIV與紅色（只是爲了將其劃分），並且2的div裏面，一個磁頭，並用分別色黃色和綠色一體。我希望這是你想要的 -

<html> 

<head> 
    <title>try</title> 
    <style type="text/css"> 
     .main { 
      position: relative; 
      height:100%; 
      width:100%; 
      border:5px solid black; 
      background-color: red; 
     } 
     .head{ 
      position: relative; 
      height:20%; 
      width:100%; 
      background-color: yellow; 
     } 
     .body{ 
      position: relative; 
      height:80%; 
      width:100%; 
      background-color: green; 
     } 
    </style> 
</head> 
<body> 
    <div class="main"> //main div having height & width 100% 
     <div class="head"> //head with color yellow of 20% 
     </div> 
     <div class="body"> //head with color yellow of 80% 
     </div> 
    </div> 
</body>

來源

2015-09-10 05:23:47

位置相對不會幫你here..it本身並不能大小事情也不是靈活，你似乎認爲。

我可以想到一些方法來做到這一點（可能有其他）。

表顯示

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    text-align: center; 
 
} 
 

 
main { 
 
    height: 250px; 
 
    border:1px solid grey; 
 
    width: 250px; 
 
    display: inline-table; 
 
    /* usually just "table"...this is just to put the two tables side by side */ 
 
    margin: 25px; 
 
} 
 

 
header { 
 
    display: table-row; 
 
    background: lightblue; 
 
    border-bottom:1px solid red; 
 
} 
 

 
.body { 
 
    display: table-row; 
 
    height: 100%; 
 
    background: lightgreen; 
 
}

<main> 
 
    <header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sed?</p> 
 
    </header> 
 
    <div class="body ">I'm the body</div> 
 
</main> 
 

 
<main> 
 
    <header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique porro sunt placeat incidunt, quo vero. Assumenda deserunt excepturi fugit incidunt?</p> 
 
    </header> 
 
    <div class="body ">I'm the body</div> 
 
</main>

Flexbox的

body { 
 
    text-align: center; 
 
} 
 

 
main { 
 
    height: 250px; 
 
    border:1px solid grey; 
 
    width: 250px; 
 
    display: inline-flex; 
 
    /* usually just "flex" ....this is to put the elements side by side */ 
 
    flex-direction: column; 
 
    margin: 10px; 
 
    vertical-align: top; 
 
} 
 

 
header { 
 
    
 
    background: lightblue; 
 
    border-bottom:1px solid red; 
 
} 
 

 
.body { 
 
    flex:1; 
 
    background: lightgreen; 
 
}

<main> 
 
    <header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, sed?</p> 
 
    </header> 
 
    <div class="body"></div> 
 
</main> 
 

 
<main> 
 
    <header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique porro sunt placeat incidunt, quo vero. Assumenda deserunt excepturi fugit incidunt?</p> 
 
    </header> 
 
    <div class="body "></div> 
 
</main>

來源

2015-09-10 10:02:00

填充剩下的高度相對DIV

回答

相關問題