嵌套div的高度問題

讓我的嵌套div正確排列有點麻煩。你可以看到我對Dabblet使用的代碼示例：嵌套div的高度問題

我碰到以下問題：

該包裝垂直滾動。我可以忍受這一點，但理想情況下我寧願不這樣做。
內容需要填滿大部分內容。如果包裝拿起屏幕，則內容需要佔用大部分空間。
頁腳需要將自己對齊到包裝（加底邊距）的底部，底部沒有：0

一切我嘗試似乎讓別的東西掉落走出低谷。禁用其他css類時，我已經能夠做到這一點。只是無法讓他們同時工作。

萬一鏈接不工作：

body, html { 

} 

body { 
    background-image: url('/bground_home.png'); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    font-family: 'LegacySansUltra'; 
    font-size: 20px; 
} 
.wrapper { 
    width: 90%; 
    height: 90%; 
    background-color: white; 
    border: solid 1px #666; 
    box-shadow: 10px 10px 5px #888888; 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 

    margin: auto; 
} 

.header { 
    font-size: 27px; 
    margin: 10px; 
    background-color: Black; 
    border-top-right-radius: 15px; 
    -moz-border-radius-topright: 15px; 
    color: White; 
} 

.content { 
    width: 90%; 
    height: 70%; 
    position: relative; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    background-color: #effbfb; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    border: 3px solid #e0f8fd; 
    font-size: 25px; 
} 

.footer { 
    background-color: black; 
    padding: 5px; 
    color: White; 
    margin: 10px; 
    border-bottom-right-radius: 15px; 
    -moz-border-radius-bottomright: 15px; 
    height: 50px; 
} 


<div class="wrapper"> 
    <div class="header"> 
     <div style="position: relative; float:left; width: {#logowidth}; height: {#logoheight}; padding: 0px 10px;"> 
      <img src="{#logo}" height="{#logoheight}" width="{#logowidth}" alt="{#name}" border="1" /> 
     </div> 
     <div style="position: relative; float:left; padding-top: 20px;"> 
      {#name} 
     </div> 
     <div style="clear: both;"></div> 
    </div> 
    <div class="content"> 
     <div class="links">{#links}</div> 
    </div> 
    <div class="footer"></div> 
</div>

來源

2013-07-31 pherbio

也許你可以提供一張你想要的照片。我發現，以幫助在CSS問題。我看到了很多方法使它看起來不錯，但需要大量的問題才能找到你想要的東西。 –

我提供的dabblet鏈接應該給你一個我想要完成的概念。您需要轉到頁面頂部，並確保點擊「全部」以查看預覽和代碼。 – pherbio

我知道。但是這裏有一些問題，我只能從網站上推斷出來，但我不知道你的意圖：標題將隨其內容擴展高度，但頁腳是固定高度，是你想要的嗎？內容是包裝的百分比，但標題是基於其內容的動態，而頁腳是靜態高度。中心內容是否應該擴大以填充頁眉和頁腳之間的區域，或者是否有影響整個包裝的最小高度？所以，對於你想要的東西來說，標註圖片會有所幫助，因爲這在文本中很難解釋，有時候 –

使用此代碼：

溢出：隱藏;

來源

2013-07-31 20:49:57 AmirHussein

這是哪裏去的？我修理哪些問題？ – pherbio

問題一。把它放在包裝類中。 – AmirHussein

嵌套div的高度問題

回答

相關問題