爲什麼HTML元素總是不遵從CSS高度屬性？

我有一個頁面，它有兩個不同的部分：定義寬度和全高度的左側有一個頁面列表和右側的全寬和高度顯示選定頁面。所描述的行爲完全符合A元素和TARGET屬性;您單擊該鏈接並右側的IFRAME的來源發生更改。然而，我的問題在於大小的IFRAME：我希望它填充頁面的整個右側，因爲它是網站的主要觀點，所以在邏輯上我希望它主導用戶的注意力。爲什麼HTML元素總是不遵從CSS高度屬性？

我的想法是簡單地讓所有一個TABLE填充頁面（用height和100%width）和一行有兩個細胞;一個用於左側，另一個用於右側。我能夠很容易地給出這兩個適當的寬度和高度（左邊有width的6.5in和height的100%，而右邊有width和height的100％）。在左邊的TD單元中，我有一個頁面列表的A s，通過CSS給出了display屬性LI s。 在右邊的TD單元中，有一個IFRAME,width的100%和height的100%。問題出在這裏：它填滿整個寬度，但拒絕比默認值更高或更短（150px）這在IE，Firefox和Opera上是一致的，但不是Chrome（Chrome正確延伸IFRAME垂直100%）！高度值以像素，英寸，毫米和釐米爲單位，但不是百分比！

下面是一個自包含的代碼版本，但我的主要問題是爲什麼大多數瀏覽器拒絕使用百分比設置IFRAME高度？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<HTML style="border:1px solid #000000; height:100%; width:100%;"> 
<HEAD> 
<STYLE> 
UL A{ 
display:list-item; 
} 
</STYLE> 
</HEAD> 
<BODY style="border:1px solid #FF0000; height:100%; width:100%;"> 
<TABLE style="border:1px solid #00FF00; display:block; height:100%; width:100%;"> 
    <TBODY STYLE="height:100%;"> 
     <TR STYLE="height:100%;"> 
      <TD style="border:1px solid #0000FF; height:100%; width:6.5in;"> 
       <H1>Pages</H1> 
       <DIV> 
        <UL> 
         <A HREF="page1.htm" TARGET="CONTENT_HOLDER">First Page</A> 
         <A HREF="page2.htm" TARGET="CONTENT_HOLDER">Second Page</A> 
         <A HREF="lastPage.htm" TARGET="CONTENT_HOLDER">Final Page</A> 
        </UL> 
       </DIV> 
      </TD> 
      <TD STYLE="border:1px solid #FFFF00; height:100%; width:100%;"> 
       <IFRAME NAME="CONTENT_HOLDER" ID="CONTENT_HOLDER" STYLE="border:1px solid #FF00FF; height:100%; width:100%;"></IFRAME> 
      </TD> 
     </TR> 
    </TBODY> 
</TABLE> 
</BODY> 
</HTML>

這應該顯示我的網站的基本理念，用不同顏色的清晰概括主要內容。在這裏，爲了獲得小代碼，它以糟糕的形式（概述，內聯樣式等）完成。實際網站還有幾百行，我不認爲你想看。

來源

2012-08-15 Supuhstar

。與內聯CSS一樣，以及代碼中的其他幾件事情。我還沒有看到任何人在幾年內寫出大寫的HTML。你的代碼看起來像你從一本10歲的書中學習HTML。事情發生了很多變化。 – Spudley 2012-08-15 20:11:53

桌子左右兩側保證只有左右兩邊沒有任何東西或兩側;我找不到一個更好的方法來製作這個左/右頁面。內聯CSS是我可以把它放到一個片段。我通過學習網頁和w3文檔教自己的HTML。 – Supuhstar 2012-08-15 20:19:36

你不能使用流體百分比的佈局使用div嗎？ – 2012-08-15 20:30:05

-1

好吧，這裏是 - 兩個欄佈局和the paste：使用佈局表被認爲是實踐中非常差，和過時的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>layout</title> 
<style type="text/css"> 

html,body { 
     width:100%; 
     height:99%; 
     margin:0; 
     padding:0; 
} 

#left { 
     float:left; 
     width:6.50in; 
     height:100%; 
     border:4px solid #008; 
     overflow: auto; 
     background-color: #eee; 
} 

#right { 
     position: relative; 
     margin-left: 6.58in; 
     height:100%; 
     text-align:left; 
     border:4px solid #080; 
} 

#left h1 { 
     margin-left: 1em; 
     color:blue; 
} 

#left ul { 
     list-style-type:none; 
     padding:8px 2px; 
} 

#left ul li a { 
     font-size:32px; 
     padding: 2px 1em; 
     text-decoration:none; 
} 

#left ul li:hover { 
     background-color:blue; 
     color:white; 
} 

#left ul li:hover a { 
     color:white; 
} 

#CONTENT_HOLDER { 
     border:1px solid #FF00FF; 
     height:100%; 
     width:100%; 
} 

</style> 
</head> 
<body> 

<div id="left"> 
<h1>Pages</h1> 
<div> 
     <ul> 
       <li><a href="page1.htm" target="CONTENT_HOLDER">First Page</a></li> 
       <li><a href="page2.htm" target="CONTENT_HOLDER">Second Page</a></li> 
       <li><a href="lastPage.htm" target="CONTENT_HOLDER">Final Page</a></li> 
     </ul> 
</div> 
</div> 

<div id="right"> 
     <iframe name="CONTENT_HOLDER" id="CONTENT_HOLDER"></iframe> 
</div> 

</body> 
</html>

來源

2012-08-15 21:59:23 Stano

順便說一句，你也可以很容易地使用'<！DOCTYPE html>' – Stano 2012-08-15 22:32:17

切換到html5感謝您創建沒有表格，但它不回答我的問題。 – Supuhstar 2012-08-15 23:49:14

那麼，要禁用表格比例的自動優化，請強制[固定表格佈局] algorythm並將'display'屬性恢復爲默認值：'

'另外，你還可以刪除'tbody'和'tr'的冗餘內聯樣式標籤在您的HTML。 – Stano2012-08-16 09:35:27

如果你只是爲你的iframe的代碼，你會發現它在IE中延伸到100％。這個問題可能與你的表格有關。表格不被視爲頁面佈局的最佳實踐。你可能想看看使用'浮動'爲您的佈局。

來源

2012-08-15 20:08:28 robbieAreBest

「浮動」不創建預期的設計;我希望目錄總是在6.5英寸寬，而內容應該始終在右側並填充整個頁面的其餘部分。這裏是屏幕預覽實際頁面的樣子：http://fc01.deviantart.net/fs71/f/2012/228/c/9/windows_8_presentation_example_by_supuhstar-d5bbvl9.png – Supuhstar 2012-08-15 20:26:58

@Supuhstar對於這樣一個簡單的佈局表真的這裏沒有必要。 – Stano 2012-08-15 20:31:53

你會如何建議我這樣做？我很想看到你的解決方案！還要提一下爲什麼表格效率較低。 – Supuhstar 2012-08-15 21:00:04

相關問題