不同頁面大小的靈活DIV高度

任何想法如何使下面的代碼中的中間部分（jsFiddle here）適應實際容器的高度而不指定固定值或Javascript？在這個小提琴中，我嘗試設置容器的絕對和相對值，但頁面始終顯示垂直滾動條，因爲容器的高度超出了實際頁面的高度。不同頁面大小的靈活DIV高度

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style> 
     body { margin: 0; height:100%;} 
     #mainContainer { position: absolute; right: 4%; left: 4%; height: 100%; } 
     #headerContainer { width: 100%; position: relative; background: #323232; color: white; height: 30px; } 
     #middleContainer { height: 100%; } 
     #leftSection { position: absolute; float: left; width: 175px; background: #71ABD1; height: 100%; overflow: auto; color: black; } 
     #middleSection { position: absolute; height: 100%; background-color: yellow; left: 175px; right: 175px; color: black; } 
     #rightSection { float: right; height: 100%; width: 175px; border-left: 1px dotted black; background: red; color: black; } 
     #footerContainer { position: relative; width: 100%; height: 30px; background: #323232; color: white; } 
    </style> 
</head> 
<body> 
    <div id="mainContainer"> 
     <div id="headerContainer"> 
      headerContainer 
     </div> 
     <div id="middleContainer"> 
      <div id="leftSection"> 
       <div style="margin-top: 30px;">leftSection</div> 
      </div> 
      <div id="middleSection"> 
       <div style="margin-top: 30px;">middleSection</div> 
      </div> 
      <div id="rightSection"> 
       <div style="margin-top: 30px;">rightSection</div> 
      </div> 
     </div> 
     <div id="footerContainer"> 
      footerContainer 
     </div> 
    </div> 
</body> 
</html>

來源

2012-10-04 Maya

您是否試圖讓中間div與瀏覽器窗口一樣高，或者這是一個簡單的虛擬列問題？ –

兩者，我需要中間div伸展到窗口的高度（這將導致包含的左，中，右列伸展到高度），同時保持頁眉和頁腳div的地方。 – Maya

這似乎做你想要什麼：

http://jsfiddle.net/grc4/XTQuT/2/

絕對定位需要#middleContainer和#footerContainer出正常流動。 #middleContainer被迫佔用整個頁面的大小，但被賦予一定的餘量以留出頁眉和頁腳的空間。 #footerContainer固定在頁面底部bottom: 0。然後，左列和右列可以使用height: 100%佔據合適的空間，但中間列仍然需要絕對定位才能強制它僅使用剩餘空間。

來源

2012-10-04 08:44:50 grc

輝煌，那正是我想要做的，謝謝！ – Maya

................................

瑪雅喜我建議üü可以使用表性質在你的代碼，如果是比檢查此demo

HTML

<div class="wrap"> 

    <div class="header">header</div> 
    <div class="conternt"> 
    <div class="left">Left sdaf dsaklf jdslkaf jdlskfj dlskafj dslkf jdslkf jsdlakfj sdlakfj sdlkf jlsdkfj sladkfj sdalkfj sadlkf </div> 
    <div class="center">Center flexible</div> 
    <div class="right">right</div> 
    </div> 
    <div class="footer">footer</div> 

</div>

的CSS

.header{ 
background:green; 
    color:#fff; 
    padding:20px; 
} 

.conternt{ 
background:yellow; 
    display:table; 
    width:100%; 
} 
.left, .right, .center{ 
display:table-cell; 
    color:#fff; 
} 
.left, .right{ 
width:100px; 
} 
.left{ 
background:rgba(0,0,0,0.5) 
} 
.center{ 
background:rgba(0,0,0,0.1) 
} 
.right{ 
background:rgba(0,0,0,0.9) 
} 



.footer{ 
background:red; 
    color:#fff; 
    padding:20px; 

}

live demo

來源

2012-10-04 08:26:51

這不起作用，中間div的高度沒有完全拉伸到頁面的高度，頁腳也不在瀏覽器的底端。 – Maya

你到底需要什麼瑪雅...... –

@Maya你想要這樣嗎http://tinkerbin.com/YIzYSP1H –

同時指定#footerContainer和#headerContainer爲百分比而不是像素的高度，你爲別人DIV這樣做。在這個fiddle我給了10％的頁眉和頁腳，以及80％的所有中間商divs。

來源

2012-10-04 08:28:58 Nelson

不同頁面大小的靈活DIV高度

回答

相關問題