指定的div作爲兄弟DIV

的容器高度減去100％的高度我有下面的佈局的div指定的div作爲兄弟DIV

<html style="height:100%"> 
<body style="height:100%"> 
    <div id="divBody" style="height:100%;width:1000px"> 
     <div id="divHeader" style="height:30px"></div> 
     <div id="divContent" style="height:100%"> 
      <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div> 
      <div id="divRight" style="width:800px"></div> 
     </div> 
    <div> 
</body> 
</html>

我的問題是，如何divContent擁有的身體100％的高度。我需要做的是佔據divBody的整個高度減去divHeader的高度。所以我設置divContent的高度爲auto：

<html style="height:100%"> 
<body style="height:100%"> 
    <div id="divBody" style="height:100%;width:1000px"> 
     <div id="divHeader" style="height:30px"></div> 
     <div id="divContent" style="height:auto"> 
      <div id="divLeft" style="height:100%; float:left; width:200px; border-left:1px solid black"></div> 
      <div id="divRight" style="width:800px"></div> 
     </div> 
    <div> 
</body> 
</html>

現在divContent的身高是正確的，它是divBody的100％減去divHeader的高度，但現在divLeft的高度不填100％它的父（ divContent）。我怎樣才能在這裏得到兩全其美的呢？

來源

2012-05-15 Jeremy

我會使用jQuery的css方法。 –

將其設置爲100％高度的目的是什麼？僅僅是展示不同的背景？要啓用滾動？圓角？ –

因爲從Web應用程序的角度來看，如果應用程序包含整個窗口，則應用程序的整體外觀更加合理，只是包含內容的一部分。 – Jeremy

您應該繼續使用百分比，而不是使用標題像素的固定量。標題和內容的寬度應該是100％，但高度是「自動」，因此它實際上會根據您正在使用的正文div中的實際需要進行調整。

關於到div的左側和右側，兩者都應該設置爲高度100％我想

來源

2012-05-15 22:23:07 Sebas

確認，左右高度爲100％是可以的......但是，正如塞巴斯蒂安所說的，使用百分比。 – Vladimir

我已經將標題和內容高度設置爲自動，沒有變化，它仍然不會導致divLeft和divRight填充整個高度。 – Jeremy

如果所有你關心的是兩列和固定頭部高度的高度，有一個CSS黑客工具，可以幫助你做到這一點。

考慮這個HTML：

<html style="height:100%"> 
<body style="height:100%"> 
    <div id="divBody"> 
     <div id="divHeader">Header</div> 
     <div id="divContent"> 
      <div id="divLeft">Left</div> 
      <div id="divRight">Right</div> 
     </div> 
    </div> 
</body> 
</html>

下面CSS：

#divBody { 
    height: 100%; 
    width: 1000px; 
    overflow: hidden; 
} 

#divHeader { 
    height:30px; 
    background-color: Yellow; 
} 

#divContent { 
    height:auto; 
    background-color: Aqua; 
    position: relative; 
} 

#divLeft {   
    height:100%; 
    float:left; 
    width:200px; 
    border-left:1px solid black; 
    background-color: Azure; 

    padding-bottom: 30000px; 
    margin-bottom: -30000px; 
} 

#divRight { 
    height: 100%; 
    width:800px; 
    background-color: Pink; 

    padding-bottom: 30000px; 
    margin-bottom: -30000px; 
}

這裏的jsfiddle與插圖：http://jsfiddle.net/3rDNC/

來源

2012-05-15 22:40:02

哇，這似乎工作，但我不明白填充和邊距實際上在做什麼。這對跨瀏覽器支持如何？ – Jeremy

這是一個老問題，但這裏是我的使用calc（100％ - 30px）減去標題大小的兩分錢：

#divContent { 
    height: calc(100% - 30px); 
    background-color: Aqua; 
    position: relative; 
}

來源

2017-09-12 15:56:24 Rachid

指定的div作爲兄弟DIV

回答

相關問題