將高度設置爲100時Div縮放至內容

我有三個嵌套div，內部有一個固定高度，中間一個用於填充外部填充，外部填充外部填充，另一個填充內部填充底部頁腳。但中間部分似乎只與內部一樣高，這是我不想要的。將高度設置爲100時Div縮放至內容

我將問題簡化爲以下內容，我認爲這只是一個簡單的例子。我不想更改外部或內部div的高度屬性，因爲這會干擾佈局的其餘部分。有沒有辦法通過改變中間div的屬性來做我想要的？

這裏的HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 
     <div id="outer"> 
      <div id="middle"> 
       <div id="inner"></div> 
      </div> 
     </div> 
    </body> 
</html>

而CSS：

html{height:100%;} 
body{height:100%;} 
#outer{height: auto; min-height: 100%;} 
#middle{height: 100%;} 
#inner{height:500px;}

您可以檢查#middle DIV得到高度500，而我希望它填補了#outer股利。

我是一個CSS的新手，幾乎所有的代碼都是從不同的教程和/或試驗和錯誤複製。所以請原諒我是否做了明顯錯誤/愚蠢的事情。

編輯：我不明白爲什麼，但似乎取消了doctype聲明使問題消失。因此，我更改了代碼示例以包含聲明。

來源

2013-03-20 ronno

你嘗試使用Firebug查看適用的CSS到那個div？ – 2013-03-20 17:52:19

@IvayloStrandjev我試過使用檢查元素。它說適用於它的唯一樣式是'height：100％;' – ronno 2013-03-20 18:03:04

你的錯誤是將'body'和'html'類放到高度：100％（它什麼都不做）。相反，我把你的外部股利100％的高度。

<html> 
<head> 
<style type="text/css"> 
div {border:2px solid black;} 
div div {border-color: blue;} 
div div div {border-color: red;} 
#outer{height: 100%; min-height: 100%;} 
#middle{height: 100%;} 
#inner{height:500px;} 
</style> 
</head> 

<body> 
    <div id="outer"> 
     <div id="middle"> 
      <div id="inner"></div> 
     </div> 
    </div> 
</body> 
</html>

如果你不能工作了如何獲得在混合頁腳，我已經給你太多的例子：

<html> 
    <head> 
<style type="text/css"> 
div {border:2px solid black;} 
div div {border-color: blue;} 
div div div {border-color: red;} 
#outer{height: 100%; min-height: 100%; position: relative;} 
#middle{height: 100%;} 
#inner{height:500px;} 
#footer{height:100px;width:100%;position:absolute;bottom:0;} 
</style> 
    </head> 

    <body> 
     <div id="outer"> 
      <div id="middle"> 
       <div id="inner"></div> 
      </div> 
      <div id="footer">This is the footer</div> 
     </div> 
    </body> 
</html>

來源

2013-03-20 18:04:28 Ozzy

現在這超出了我對html/CSS的理解。你的文件和我的文件之間唯一的區別就是我的html在頂部有一個doctype聲明。我會對這個問題做適當的修改來反映這一點。 – ronno 2013-03-20 18:12:44

@ronno我沒有提供給你整個文件，這只是一個例子哈哈。新增了一個爲您在此佈局中添加頁腳的示例。 – Ozzy 2013-03-20 18:13:58

@ronno哦，我不認爲你注意到了，我稍微改變了你的CSS。有一個區別，正如我上面寫的代碼示例 – Ozzy 2013-03-20 18:18:26

將高度設置爲100時Div縮放至內容

回答

相關問題